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
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!