头部导航菜单跟随滑动方向隐藏显示的效果jQuery插件

时间: 作者:admin 浏览:
;(function($, window, undefined){
    //本插件只可以绑定一个元素,因为一般网站一个页面就一个导航;
    //绑多个不保证能正确,一般一个页面就一个导航,如果有多个就要绑多次

    $.fn.headerslide=function(options){
        var defaults={
            UpOrDown:function(UpOrDownStr){
                //返回up或者down字符串
            },
            UpSpeed:200,//上隐藏的速度
            DownSpeed:200,//下显示的速度
            slideUpCallback:function(){
                //上隐藏的回调函数
            },
            slideDownCallback:function(){
                //下显示的回调函数
            }
        };
        var opts = $.extend({},defaults,options || {});
        var classes={};
        return this.each(function(i){
            var self=$(this);
            var beforeScrollTop=$(window).scrollTop();
            var delta;
            var upflag=1;
            var downflag=1;
            $(window).off("scroll").on("scroll",function(){
                var afterScrollTop=$(this).scrollTop();
                delta = afterScrollTop - beforeScrollTop;
                beforeScrollTop = afterScrollTop;//把最新位置赋值给初始位置
                var scrollTop = $(this).scrollTop();
                var documentHeight = $(document).height();
                var windowHeight = $(this).height();
                if (scrollTop + windowHeight > documentHeight - 10) {  //滚动到底部执行回调
                    if(typeof opts.UpOrDown=='function'){
                        if (upflag) {
                            if(typeof opts.slideDownCallback=='function'){
                                self.slideDown(opts.DownSpeed, function(){
                                    self.css("overflow","visible");
                                    opts.slideDownCallback();
                                });
                            }
                            downflag = 1;
                            upflag = 0;
                        }
                    }
                    return;
                }
                if (afterScrollTop < 10 || afterScrollTop > $(document.body).height - 10) {
                    if(typeof opts.UpOrDown=='function'){
                        if (upflag) {
                            if(typeof opts.slideDownCallback=='function'){
                                self.slideDown(opts.DownSpeed,function(){
                                    self.css("overflow","visible");
                                    opts.slideDownCallback();
                                });
                            }
                            downflag = 1;
                            upflag = 0;
                        }
                    }
                }else {
                    if (Math.abs(delta) < 10) {
                        return false;
                    }
                    if(typeof opts.UpOrDown=='function'){
                        opts.UpOrDown(delta > 0 ? "down" : "up");
                        var direction=delta > 0 ? "down" : "up";
                        if (direction == "down") {
                            if (downflag) {
                                if(typeof opts.slideUpCallback=='function'){
                                    self.slideUp(opts.UpSpeed,opts.slideUpCallback);
                                }
                                downflag = 0;
                                upflag = 1;
                            }
                        }
                        if (direction == "up") {
                            if (upflag) {
                                if(typeof opts.slideDownCallback=='function'){
                                    self.slideDown(opts.DownSpeed,function(){
                                        self.css("overflow","visible");
                                        opts.slideDownCallback();
                                    });
                                }
                                downflag = 1;
                                upflag = 0;
                            }
                        }
                    }
                }
            })
        })
    }
})(jQuery, window, undefined)

//调用方法:$("selector").headerslide({})
微信公众号
微信公众号:
  • 前端全栈之路(微信群)
前端QQ交流群
前端QQ交流群:
  • 794324979
  • 734802480(已满)

更多文章

栏目文章


Copyright © 2014-2023 seozhijia.net 版权所有-粤ICP备13087626号-4