前言

导航栏是网站必不可少的一部分，那么，导航栏应该怎么样子实现，可以高效自定义兼容开发呢？当然，不仅要实现，而且还要实现导航栏顶部固定位置，下拉隐藏，稍微往上滑动就会出现，而且到顶端就直接显示在原有的位置。实现功能的同时，还要平缓的过渡？下面我们将一起探讨下如何去实现

一、实现的案例

实现功能：

1、左边为logo。logo有一个刷新动作

2、右边为导航栏目录

3、下拉实现隐藏

4、上滑实现固定头部

5、到达顶部显示默认位置

二、实现代码

1.html

<div><div class="top-bar"><div class="new-header container clearfix"><div class="top-bar-left pull-left navlogo"><a class="logo box" src="#"><img src="https://www.zhaojiajuwang.com/img/common/ativity_2.png" alt=""><b class="shan"></b></a></div><div class="top-bar-left header-nav fl"><ul class="top-bar-menu nav-pills"><li class="navbar-item"><a href="">首页</a></li><li class="navbar-item"><a href="">商城中心</a></li><li class="navbar-item"><a href="">公司简介</a></li><li class="navbar-item"><a href="">活动专区</a></li><li class="navbar-item"><a href="">详情介绍</a></li><li class="navbar-item"><a href="">商家中心</a></li></ul></div></div></div></div>

2.js

$(function() {var f = $(".top-bar");var R = $(document).scrollTop();var d = $(document);var L = $(".fixed-nav").outerHeight();$(window).scroll(function() {var a = $(document).scrollTop();if (d.scrollTop() >= 30) {f.addClass("fixed-nav");$(".navTmp").fadeIn()} else {f.removeClass("fixed-nav fixed-enabled fixed-appear");$(".navTmp").fadeOut()}if (a > L) {$(".fixed-nav").addClass("fixed-enabled")} else {$(".fixed-nav").removeClass("fixed-enabled")}if (a > R) {$(".fixed-nav").removeClass("fixed-appear")} else {$(".fixed-nav").addClass("fixed-appear")}R = $(document).scrollTop()})
});

3.css

.top-bar {position: relative;width: 100%;z-index: 69;box-shadow: 0px 5px 40px 0px rgba(17,58,93,0.1) !important;background-color: rgba(255,255,255,1);border-top: 0px solid rgba(221, 221, 221, .221);
}
.container {max-width: 1300px;
}
.new-header {border-bottom: 1px solid rgba(0,0,0,.05);background-color: rgba(255,255,255,0);position: relative;background-image: url(https://www.qiyueyun.cn/zb_users/theme/downlee/style/images/top-fr-bg.png);background-position: center right;background-size: auto 100%;
}
.shan {content: "";position: absolute;-webkit-animation: changeImg 3.5s;-o-animation: changeImg 3.5s;animation: changeImg 3.5s;top: 0;width: 30%;height: 100%;background: linear-gradient(to right,rgba(255, 255, 255, 0.25) 0,rgba(255, 255, 255, 0.58) 50%,rgba(255, 255, 255, 0.25) 100%);transform: skewX(-45deg);animation-iteration-count: infinite;-moz-animation-iteration-count: infinite;-webkit-animation-iteration-count: infinite;
}
@-webkit-keyframes changeImg {from {left: -100%;}100% {left: 200%;}
}
.pull-left {float: left;
}
a.logo.box {position: relative;overflow: hidden;display: block;cursor: pointer;margin: 0 auto;line-height: 50px;white-space: nowrap;
}
a.logo.box img {display: inline-block;height: 57px;
}
.top-bar-left.header-nav {margin-left: 30px;
}
.nav-pills {float: left;font-size: 14px;
}
.nav-pills li {width: auto;position: relative;list-style: none;display: block;float: left;margin-right: 30px;
}
.nav-pills li:before {width: 0;height: 2px;position: absolute;bottom: -1px;left: 50%;background-color: #0188FB;content: '';transition: all .6s;z-index: -1;
}
.nav-pills li a {line-height: 57px;display: block;color: #000000;font-size: 15px;
}
.nav-pills > li:hover:before{width: 100%;left: 0;
}.nav-pills li:hover > a{color: #0188FB;
}
.top-bar.fixed-nav{left: 0;top: 0;width: 100%;-webkit-transition: all .3s ease-out 0s;-o-transition: all .3s ease-out 0s;transition: all .3s ease-out 0s;
}
.fixed-nav.fixed-enabled {position: fixed;top: -60px;z-index: 9999;-webkit-animation-name: slideDown;-moz-animation-name: slideDown;-o-animation-name: slideDown;animation-name: slideDown;
}
.fixed-nav.fixed-appear{position: fixed;top: 0;z-index: 9999;-webkit-animation-name: slideUp;-moz-animation-name: slideUp;-o-animation-name: slideUp;animation-name: slideUp;-webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.1);box-shadow: 0 0 3px 1px rgba(0,0,0,0.1);
}

---