网站推广的方式和管理方法,重庆制作小程序公司,二进制可以做网站是吗,佛山网站建设 乐云践新专家前言
导航栏是网站必不可少的一部分#xff0c;那么#xff0c;导航栏应该怎么样子实现#xff0c;可以高效自定义兼容开发呢#xff1f;当然#xff0c;不仅要实现#xff0c;而且还要实现导航栏顶部固定位置#xff0c;下拉隐藏#xff0c;稍微往上滑动就会出现那么导航栏应该怎么样子实现可以高效自定义兼容开发呢当然不仅要实现而且还要实现导航栏顶部固定位置下拉隐藏稍微往上滑动就会出现而且到顶端就直接显示在原有的位置。实现功能的同时还要平缓的过渡下面我们将一起探讨下如何去实现 一、实现的案例 实现功能
1、左边为logo。logo有一个刷新动作
2、右边为导航栏目录
3、下拉实现隐藏
4、上滑实现固定头部
5、到达顶部显示默认位置 二、实现代码 1.html
divdiv classtop-bardiv classnew-header container clearfixdiv classtop-bar-left pull-left navlogoa classlogo box src#img srchttps://www.zhaojiajuwang.com/img/common/ativity_2.png altb classshan/b/a/divdiv classtop-bar-left header-nav flul classtop-bar-menu nav-pillsli classnavbar-itema href首页/a/lili classnavbar-itema href商城中心/a/lili classnavbar-itema href公司简介/a/lili classnavbar-itema href活动专区/a/lili classnavbar-itema href详情介绍/a/lili classnavbar-itema 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);
}
