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插件固定导航条在浏览器顶部不随滚动条的下拉而移动的文章就介绍到这了，更多相关内容请搜索码云笔记以前的文章或继续浏览下面的相关文章，希望大家以后多多支持码云笔记。