很久之前博客就使用了很多花里胡哨的东西，比如Live2D模型，背景，文字，页面离开载入，鼠标点击，浮动，滚动等等。

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

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

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

.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 导航浮动 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();

到这里就算结束了,希望对你们有所帮助吧.  附: (文章为原创,转载记得加上出处哦。)