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

2022-08-22 22:01:47

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

在导航栏中加入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：代码展开

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‘);
        }
        //判断鼠标向上滚动，显示出来
 

代码展开

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

码农公寓

相关文章