最新公告  | 
  • CTRL + D 加入收藏不迷路哦!

  • 欢迎您光临码云笔记网,一个关注WEB前端开发的个人技术博客!

jquery插件固定导航条在浏览器顶部不随滚动条的下拉而移动

相信大家有过这种经历,在一些网站中下拉滚动条查看内容时,导航条不会随着下拉的滚动条移动,而是固定在了顶部。对于刚入行的童鞋可能很高大上的样子,大神就绕道而行了。其实实现起来很简单,今天我就给大家用自制的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插件的写法,来封装自己的插件。这里只是实现的一种方式,当然大家也有更好的方法,欢迎来拍砖。

1. 本站所有免费资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!
2. 本站不保证所提供下载的免费资源的准确性、安全性和完整性,免费资源仅供下载学习之用!如有链接无法下载、失效,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或技术教程,您可以投稿发布,成功分享后有站币奖励和额外收入!
5. 加入前端开发QQ群:565733884,我们大家一起来交流技术!
码云笔记 » jquery插件固定导航条在浏览器顶部不随滚动条的下拉而移动

2 评论

  1. 感谢楼主,正是我需要的,哈哈

发表评论

准备开启WordPress网站建设推广?

联系我们 定制开发