向下滑动导航栏的背景由透明变为不透明bootstrap

前言：通过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实现的，当时打的时候感觉区别还是挺大的。