Javascript 使导航栏以白色背景显示在滚动条上_Javascript_Jquery_Html_Css_Twitter Bootstrap

Javascript 使导航栏以白色背景显示在滚动条上

javascript jquery html css twitter-bootstrap

Javascript 使导航栏以白色背景显示在滚动条上,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,我试图让我的导航栏有一个白色的背景，只要用户向下滚动的网站。但由于某些原因，我不知道如何使白色背景显示在导航栏上，我的背景在滚动时不断消失因此，我的导航栏显示良好，页面顶部没有背景。然后我需要的是，一旦用户向下滚动页面，它就应该贴在屏幕顶部，上面有一个白色背景大概是这样的：但是很明显我已经设置了导航栏，我只需要显示背景 <body> <div class="parallax"> <div class ="logo">

我试图让我的导航栏有一个白色的背景，只要用户向下滚动的网站。但由于某些原因，我不知道如何使白色背景显示在导航栏上，我的背景在滚动时不断消失

因此，我的导航栏显示良好，页面顶部没有背景。然后我需要的是，一旦用户向下滚动页面，它就应该贴在屏幕顶部，上面有一个白色背景

大概是这样的：

但是很明显我已经设置了导航栏，我只需要显示背景

<body>
    <div class="parallax">
        <div class ="logo">
        <img src="Images/logo1.fw.png">
        </div> 

     <nav class="navbar navbar-default">
        <div class="container-fluid">
          <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>
          </div>
          <div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav">
              <li><a href="#">Home</a></li>
              <li><a href="#">Timetable</a></li>
              <li><a href="#">Prices</a></li>
              <li><a href="#">About Us</a></li>
              <li><a href="#">Contact</a></li>
              <li><a href="#">Belt Rankings</a></li>
              <li><a href="#">Blog</a></li>
              <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Classes </a>
                <ul class="dropdown-menu">
                  <li><a href="#">Brazilian Jiu Jitsu</a></li>
                  <li><a href="#">Wrestling</a></li>
                  <li><a href="#">Boxing</a></li>
                  <li><a href="#">Yoga</a></li>
                  <li><a href="#">Women Self-Defence</a></li>
                  <li><a href="#">Treatments</a></li>
                  <li><a href="#">Kids</a></li>
                </ul>
              </li>
            </ul>
          </div><!--/.nav-collapse -->
        </div><!--/.container-fluid -->
      </nav>

          <div class="container">

        </div>





    </div>

    <div class="parallax1">
    </div>
          <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.js"></script>
    <script>
  $(document).ready(function(){

    // hide .navbar first
    $(".navbar").show();

    // fade in .navbar
    $(function () {
        $(window).scroll(function () {

        $('.navbar-default').css({
          backgroundColor:  $(this).scrollTop() > 100 ? 
            'white':
            'transparent'
        })
        });


    });

});
      </script>
</body>

原则上，您需要更改：

...
if ($(this).scrollTop() > 100) {
  $('.navbar').fadeIn();
} else {
  $('.navbar').fadeOut();
}
...

。。。到

...
$('.navbar-default').css({
  backgroundColor:  $(this).scrollTop() > 100 ? 
    'white':
    'transparent'
})
...

您可能还希望在CSS中为

.navbar default

的

背景色

属性添加过渡，就像您为链接所做的那样：

.navbar-default {
  -webkit-transition: background-color 200ms linear;
  -moz-transition: background-color 200ms linear;
  -o-transition: background-color 200ms linear;
  -ms-transition: background-color 200ms linear;
  transition: background-color 200ms linear;
}

实际上，您希望将其封装在一个函数中，该函数不仅仅在

scroll

事件中调用。也就是在

加载

和

调整大小

事件上，如下所示：

var checkScrollBar=函数（）{
$（'.navbar默认值'）.css({
backgroundColor:$（此）.scrollTop（）>100？
“白色”：“透明”
})
}
$（窗口）。打开（'load resize scroll'，选中滚动条）

工作示例：

var checkScrollBar=函数（）{
$（'.navbar默认值'）.css({
backgroundColor:$（此）.scrollTop（）>100？
“白色”：“透明”
})
}
$（窗口）。在（'load resize scroll'，checkScrollBar）

正文{
保证金：0
}
正文>div{
背景色：红色；
}
.视差1{
最低高度：200vh；
}
/* 
*以上所有CSS都只是为了这样，不要在项目中使用
*/
nav.navbar-default{
背景色：透明；
过渡：背景色200ms线性；
}


切换导航

hi，这确实有效，但只有当我向上滚动时才有效：）我什么也不向下滚动，但只要我滚动到页面顶部，它就可以工作一秒钟：）它应该可以工作。您还有其他一些东西正在干扰它或覆盖CSS。没有检查的能力，我帮不了你更多。请提供一个。我已经上传了我的问题和我的所有代码从我的网站，但我再次不知道是什么wrong@RonTheOld，背后的全部要点就是帮助他人。您需要在此处的问题中创建一个片段，这样您的问题和对它的任何回答将在您的网站更改后很长时间内继续帮助将来的访问者解决类似的问题，不再重现该问题。根据你上面的评论，我提供的脚本有其他的干扰。你需要在问题中展示它，因此a）我告诉你如何修复它；b）其他人也学习如何解决同样的问题。到目前为止，你的问题不是一个片段，也不会重现所描述的问题。但这不可能是问题，我的朋友，因为我已经向你展示了我的示例代码，如果你明白我的意思的话？因此，如果你在sinppet中运行它，它将不起作用，但我会有一个快速的问题-你是否更改了

body

或

html

元素的

overflow-y

属性？如果是这样的话，这就妨碍了Chrome获得准确的

scrollTop（）

——结果总是为零。在发现原因之前，我已经挣扎过几次了。@arbuthnott不，我没有，所以我不确定哈哈：）

.navbar-default {
  -webkit-transition: background-color 200ms linear;
  -moz-transition: background-color 200ms linear;
  -o-transition: background-color 200ms linear;
  -ms-transition: background-color 200ms linear;
  transition: background-color 200ms linear;
}