web前端开发技术博客
当前位置: JavaScript > jquery插件固定导航条在浏览器顶部不随滚动条的下拉而移动

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

2018-10-29 分类:JavaScript 作者:码云 阅读(22)

相信大家有过这种经历,在一些网站中下拉滚动条查看内容时,导航条不会随着下拉的滚动条移动,而是固定在了顶部。对于刚入行的童鞋可能很高大上的样子,大神就绕道而行了。其实实现起来很简单,今天我就给大家用自制的jQuery小插件来实现固定某个元素在浏览器顶部(也可以自定义距离浏览器顶部多高的位置),不随滚动条的下拉而移动效果。我的原则是能用源码解释清楚的,尽量少说话,哈哈

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
;(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插件的写法,来封装自己的插件。这里只是实现的一种方式,当然大家也有更好的方法,欢迎来拍砖。

「如果觉得我的文章对您有用,请帮助本站成长」

赞(4) 打赏

觉得文章有用就打赏一下文章作者

支付宝
微信
4

觉得文章有用就打赏一下文章作者

支付宝
微信

上一篇:

下一篇:

共有 2 条评论 - jquery插件固定导航条在浏览器顶部不随滚动条的下拉而移动

  1. 志在必得 Linux Chrome 62.0.3202.84

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

    1. mybj Windows 7 Chrome 63.0.3239.132

      @志在必得谢谢

博客简介

码云笔记: mybj123.com,一个关注Web前端开发技术的博客,主要记录和总结前端工作中常用的知识及我的生活。
更多博客详情请看关于博客

圈子

关注微信公众号
关注微信公众号

精彩评论

服务热线:
 13888888888

 QQ在线交流