jquery插件固定导航条在浏览器顶部不随滚动条的下拉而移动
相信大家有过这种经历,在一些网站中下拉滚动条查看内容时,导航条不会随着下拉的滚动条移动,而是固定在了顶部。对于刚入行的童鞋可能很高大上的样子,大神就绕道而行了。其实实现起来很简单,今天我就给大家用自制的 jQuery 小插件来实现固定某个元素在浏览器顶部(也可以自定义距离浏览器顶部多高的位置),不随滚动条的下拉而移动效果。我的原则是能用源码解释清楚的,尽量少说话,哈哈
;(function(){ $.fn.extend({ 'affix':function(opt){ var DEFAULT = { 'offLeft':'0', 'offT':'0' }; var options = $.extend({},DEFAULT,opt); this.each(function(){ var obj = $(this); var offTop = obj.offset().top; $(window).bind('scroll',checkTop); function checkTop(){ var scrollT = $(window).scrollTop(); if(scrollT >= offTop) { obj.css({'position':'fixed','left':'0','top':options.offT}); } else { obj.css({'position':'static'}); } } }); } }); })($)
这个插件是一个符合 jquery 插件规范的,大家可以参照这种 jquery 插件的写法,来封装自己的插件。这里只是实现的一种方式,当然大家也有更好的方法,欢迎来拍砖。
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
码云笔记 » jquery插件固定导航条在浏览器顶部不随滚动条的下拉而移动
码云笔记 » jquery插件固定导航条在浏览器顶部不随滚动条的下拉而移动
感谢楼主,正是我需要的,哈哈
谢谢