Sticky Header-兼容IE8的页面顶部固定jQuery插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

sticky-header.js是一款非常实用的兼容IE8+浏览器的页面顶部固定jQuery插件。该页面顶部固定插件可以通过参数来控制header元素的样式及固定效果，并且提供了丰富的回调函数。

使用方法

使用该图片画廊插件需要引入jQuery、sticky-header.js文件

            
<script src="js/jquery.min.js"></script>
<script src="js/sticky-header.js"></script>

HTML结构

你可以使用一个<header>元素来作为页面的头部。

<header class="example"> 
  <!--  header stuff ... --> 
</header>

初始化插件

在页面DOM元素加载完毕之后，可以通过stickMe()方法来初始化该页面顶部固定插件。

$(document).ready(function(){
  $('.example').stickMe(); 
})

在插件初始化之后，<header>元素的将被修改，添加一些额外的class。

<!-- 插件初始化之后header元素的结构 --> 
<header class="example stick-me not-sticking"> 
  <!--  header stuff ... --> 
</header>



<!-- header元素固定时的html结构 --> 
<header class="example stick-me sticking"> 
  <!--  header stuff ... --> 
</header>

CSS样式

你需要通过CSS来设置一下header元素的z-index属性，如果有需要，还可以设置一下它的背景颜色。

/* Make sure your header has z-index and background set and it's also full width */
.example {
  width: 100%;
  z-index: 999;
  background-color: #ffffff;
}

/* OR you can also style plugin's class .sticking, 
that way you can style it differently when it's sticking */
.sticking {
  width: 100%;
  z-index: 999;
  background-color: #ffffff;
}

配置参数

该页面顶部固定插件的默认配置参数如下：

transitionDuration: 300,
shadow: false,
shadowOpacity: 0.3,
animate: true,
triggerAtCenter: true,
transitionStyle: 'fade',
stickyAlready: false

参数	类型	描述
topOffset	int	页面滚动多少距离时顶部开始固定，默认值为300像素
shadow	boolean	当页面顶部固定时将带阴影效果
shadowOpacity	float	顶部阴影效果的透明度
animate	boolean	是否使用平滑过渡的动画效果
transitionStyle	string	顶部固定动画过渡效果的类型：'fade'或'slide'
triggetAtCenter	boolean	默认情况下，当页面滚动到viewport的一半时顶部将固定，设置该参数为false，可以使页面滚动到viewport之外才固定
stickyAlready	boolean	在页面初始化之后就使页面一直固定在顶部
transitionDuration	int	动画过渡的持续时间

事件

事件	描述
sticky-begin	当顶部开始固定时触发
sticking	当顶部固定时一直触发
top-reached	当滚动到页面顶部时触发
bottom-reached	当滚动到页面底部时触发

事件的使用方法如下：

$(document).ready(function(){
  $('.site-header').on('sticky-begin', function() { 
    console.log("Began"); 
  });

  $('.site-header').on('sticking', function() { 
    console.log("Sticking"); 
  });

  $('.site-header').on('top-reached', function() { 
    console.log("Top reached"); 
  });

  $('.site-header').on('bottom-reached', function() { 
    console.log("Bottom reached"); 
  });
})

Sticky Header插件的github地址为：https://github.com/m-danish-iqbal/sticky-header