如何在bootsrap 4中更改顶部固定导航栏的颜色？

Question

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

Answer 1

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

$(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>

Answer 2

我不确定您面临的问题是什么，但是我附加了一次点击，通过使用Scroll事件

可以让您了解滚动时更改导航栏颜色的信息

https://jsfiddle.net/we9L9h2r/