网站导航栏下滑隐藏，上滑显示，效果杠杆，兼容性强

前言

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

一、实现的案例

实现功能：

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);
}