改变引导导航条滚动效果

Changing bootstrap navbar scroll effects

本文关键字：滚动 导航 改变      更新时间：2023-09-26

我正在使用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>

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

Please Help, Thanks

您需要等待文档存在(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/
相关文章：