Question

我正在开发一个项目，我希望自举导航栏显示为透明，直到你开始滚动，然后黑条将取代透明条。我知道那里有类似的教程。但我想与我开始创作的那个一起工作。但是，我只是不确定如何正确地定位它，以及我想要的效果所需的css属性。提前谢谢！

抱歉修复。想要它从清晰的栏到滚动的黑条。

HTML：

 <nav class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
        <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-   toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">JO Project</a>
    </div>
    <div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li><a href="#part1">Part 1</a></li>
        <li><a href="#part2">Part 2</a></li>
        <li><a href="#part3">Part 3</a></li>
        <li><a href="#part4">Part 4</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</nav>

Jquery的：

<script>
$(document).ready(function(){
$(window).scroll(function(){
    if($(window).scrollTop() > $(window).height()){
        $(".navbar").css({"background-color":"transparent"});   
    }
})

}）

Answer 1

在bootstrap中，如果你使用类.navbar-inverse，则无法更改背景颜色。所以使用.navbar-default。尝试使用波纹管代码可能会有所帮助

$(document).ready(function(){
$(window).scroll(function(){
    if($(window).scrollTop() > $(window).height()){
        $(".navbar").css({"background-color":"black"});   
      $(".navbar-default").css({"background-color":"black;","border-color":"black"})
    }
});
});

.navbar{
  background-color: transparent;
  }
.navbar-default {
    background-color: transparent;
    border-color: transparent;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>
  
<div class="container">
  <h3>Basic Navbar Example</h3>
  <p>A navigation bar is a navigation header that is placed at the top of the page.</p>
</div>

如何在滚动时将引导导航栏从清除栏更改为黑条？

1 个答案: