javascript - 更改 Bootstrap 导航栏滚动效果

Question

我正在滚动 Bootstrap 导航栏以使用 jquery 将背景颜色更改为红色，但它没有任何帮助。

HTML代码

<header class="navbar navbar-default navbar-fixed-top" style="background-color:Transparent; border-color:#e74c3c;">
      <div class="navbar-brand" style="color:white;">Podlle</div>
      <div class="nabar-item">
         <a style="color:white;" href="#"<div class="navbar-text">Sign Up</div></a>
         <a style="color:white;" href="#"<div class="navbar-text">Log In</div></a>
      </div>

J查询代码

<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.js">
$(document).scroll(function(){
  $(".navbar").css("background-color" , "red");  
})

请帮忙，谢谢

Answer 1

您需要等待文档存在(DOM 就绪)，然后再对其执行任何操作。使用 jQuery，您可以使用快捷方式 $(callbackFuncion) 来做到这一点。

以下是我编写的示例代码，当页面滚动并更新具有类 nav-bar 的元素以具有红色背景时，它将打印到控制台:

$(function () { // This will wait for DOMReady
  $(document).on('scroll', function () {
    console.log("Scrolling.");
    $('.nav-bar').css('background-color', 'red');
  });
});

这是一个完整的示例代码:http://jsfiddle.net/xa8doyb4/