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

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

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

 

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

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

 

CSS部分：

1 .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);}
2 .herds-nav {position: fixed;top: -90px;-webkit-transition: top .5s;-moz-transition: top .5s;-o-transition: top .5s;transition: top .5s;}
3 .herds-nav-appear {top: 0;}

JQ 导航浮动：

 1 　　 //JQ 导航浮动
 2     function scrollfix() {
 3         var fnav = $('#herds'),
 4             t = fnav.offset().top,
 5             h = fnav.outerHeight(),
 6             winTop1 = 0,
 7             winWidth = $(window).width(),
 8             holder = jQuery('<div>');
 9         $(window).on('scroll', function () {
10             var winTop2 = $(window).scrollTop();
11             holder.css('height', h);
12             //开始浮动，不过不显示
13             if (winTop2 > t && winWidth > 980) {
14                 holder.show().insertBefore(fnav);
15                 fnav.addClass('herds-nav');
16             } else {
17                 holder.hide();
18                 fnav.removeClass('herds-nav');
19             }
20             //判断鼠标向上滚动，显示出来
21             if (winTop2 > winTop1 && winWidth > 980) {
22                 fnav.removeClass('herds-nav-appear');
23             } else if (winTop2 < winTop1) {
24                 fnav.addClass('herds-nav-appear');
25             }
26             winTop1 = $(window).scrollTop();
27         });
28     }
29     scrollfix();

 

posted @ 2019-07-03 17:48  Amayaliu  阅读(360)  评论(0)  编辑  收藏  举报