html5向上向下兼容插件,Sticky Header-兼容IE8的页面顶部固定jQuery插件
sticky-header.js是一款非常实用的兼容IE8+浏览器的页面顶部固定jQuery插件。该页面顶部固定插件可以通过参数来控制header元素的样式及固定效果，并且提供了丰富的回调函数。
使用方法
使用该图片画廊插件需要引入jQuery、sticky-header.js文件
HTML结构
你可以使用一个元素来作为页面的头部。
初始化插件
在页面DOM元素加载完毕之后，可以通过stickMe()方法来初始化该页面顶部固定插件。
$(document).ready(function(){
$('.example').stickMe();
})
在插件初始化之后，元素的将被修改，添加一些额外的class。
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");
});
})