JQ根据鼠标上下移动设置导航浮窗

下面的代码是你现在可以看见我博客的导航条效果。(JQ放于js文件中，Css放于导航页面中)

前往博客： 【JQ根据鼠标上下移动设置导航浮窗】  花里胡哨(三)

 

在导航栏中加入ID--"herds",Class--"herds",CSS放于样式中，JQ放于js文件或底部。

当然也可以自己修改ID或者Class以及放置的位置。

 

CSS部分：

.herds {width: 100%;height: 90px;background: rgba(255, 255, 255, 0.52);border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;font-size: 14px;box-shadow: 0 0 25px rgba(74, 59, 114,1);}
.herds-nav {position: fixed;top: -90px;-webkit-transition: top .5s;-moz-transition: top .5s;-o-transition: top .5s;transition: top .5s;}
.herds-nav-appear {top: 0;}

JQ 导航浮动：

　　 //JQ 导航浮动
    function scrollfix() {
        var fnav = $('#herds'),
            t = fnav.offset().top,
            h = fnav.outerHeight(),
            winTop1 = 0,
            winWidth = $(window).width(),
            holder = jQuery('<div>');
        $(window).on('scroll', function () {
            var winTop2 = $(window).scrollTop();
            holder.css('height', h);
            //开始浮动，不过不显示
            if (winTop2 > t && winWidth > 980) {
                holder.show().insertBefore(fnav);
                fnav.addClass('herds-nav');
            } else {
                holder.hide();
                fnav.removeClass('herds-nav');
            }
            //判断鼠标向上滚动，显示出来
            if (winTop2 > winTop1 && winWidth > 980) {
                fnav.removeClass('herds-nav-appear');
            } else if (winTop2 < winTop1) {
                fnav.addClass('herds-nav-appear');
            }
            winTop1 = $(window).scrollTop();
        });
    }
    scrollfix();