前言:通过scrollTop()获取到当前页面滚动的高度,然后在大于0的时候添加一个类on,然后给on添加样式就实现了,并且我觉得原先的padding设置10px,然后添加了on以后变为20px然后transtion,他就从小变大的效果还挺好看的。然后后面通过滚动条的位置更新导航目标就很简单了,直接通过bootstrap中的scrollspy滚动监听事件就直接完成了,所谓的滚动监听的使用方法就是在body里面先指定他是一个滚动监听事件,data-spy=“scroll”,然后data-target指定事件的目标,在a里面指定你内容的id或者类,接下来看代码吧。
index.html
<!--导航栏-->
<div class="navbar">
<div class="container">
<nav class="navbar fixed-top navbar-default navbar-expand-lg navbar-dark" id="menu">
<button class="navbar-toggler btn-light a ml-auto" type="button" data-toggle="collapse" data-target="#navbarNav">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse offset-3" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item ml-5">
<a class="nav-link" href="#features">SPECIALS</a>
</li>
<li class="nav-item ml-5">
<a class="nav-link" href="#about">ABOUT</a>
</li>
<li class="nav-item ml-5">
<a class="nav-link" href="#restaurant-menu">MENU</a>
</li>
<li class="nav-item ml-5">
<a class="nav-link" href="#chef">CHEF</a>
</li>
<li class="nav-item ml-5">
<a class="nav-link" href="#contactpo">CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
style.css
#menu{
padding: 20px;
transition: all 0.8s ease;
}
#menu .navbar-default{
background-color:rgba(248,248,248,0);
border-color:rgba(231,231,231,0);
}
.navbar-dark .navbar-nav .show > .nav-link, .navbar-dark .navbar-nav .active > .nav-link, .navbar-dark .navbar-nav .nav-link.show, .navbar-dark .navbar-nav .nav-link.active{
color:#d43031 !important ;
}
.on{
background-color: #262626 !important;
padding: 10px !important;
}
js
$().ready(function(){
$(window).scroll(function(){
var scrollTop = $(window).scrollTop();//获取当前滑动的位置
console.log('当前滑动的位置'+scrollTop);
if(scrollTop > 0){
$("nav").addClass("on");
}else{
// $("nav").removeClass("on");
}
})
})
效果图:
完整的餐厅项目大家可以去https://gitee.com/wulingyunya/bootstrap4/tree/master/
大家也可以去这个网站http://sc.chinaz.com/,但是是那一个我不知道了,因为这个是我刚学bootstrap4的时候打的,当时翻出来觉得这个导航栏有问题,所以改了一下,他的那个是bootstrap3实现的,当时打的时候感觉区别还是挺大的。