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");

});

})