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