3

嗨，我是 Web 开发的新手。navbar在更改颜色时，我在 bootstrap 4 beta 中遇到问题。如何在 bootstrap 4 beta 中滚动时更改固定导航栏的颜色。请考虑有关此的任何教程。

4

2 回答 2

2

我给出了一些想法，这只是一个例子，

$(document).ready(function(){
  $(window).scroll(function(){
  	var scroll = $(window).scrollTop();
	  if (scroll > 300) {
	    $(".black").css("background" , "blue");
	  }

	  else{
		  $(".black").css("background" , "#333");  	
	  }
  })
})
body{
  margin:0;
  padding:0;
  height:1000px;
}
.black{
  position:fixed;
  top:0;
  background:#333;
  width:100%;
  height:50px;
  
}
.black ul{
  list-style-type:none;
  padding:0;
}

.black ul li{
  display:inline-block;
  width:100px;
  color:red;
}

.blue{
  position:fixed;
  top:0;
  background:blue;
  width:100%;
  height:50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="black">
  <ul>
    <li>link</li>
    <li>link</li>
    <li>link</li>
    <li>link</li>
  </ul>
</div>

于 2017-10-11T07:31:24.103 回答
0

我不确定您到底面临什么问题，但我附加了一次单击，这将使您了解使用Scroll事件更改滚动时的导航栏颜色

https://jsfiddle.net/we9L9h2r/

于 2017-10-07T09:59:07.470 回答