javascript - Bootstrap 导航栏将颜色更改为滚动条

标签 javascript css twitter-bootstrap

<分区>

我使用 bootstrap 作为主题,我看到了这个网站:http://www.luatix.org/en/我喜欢导航栏上的效果。向下滚动时更改颜色并更改元素的颜色。

谢谢

最佳答案

这是一个jsfiddle example .使用 Jquery 根据滚动像素位置更改背景颜色。

这是一个fiddle using bootstrap

$(document).ready(function(){       
   var scroll_start = 0;
   var startchange = $('#startchange');
   var offset = startchange.offset();
    if (startchange.length){
   $(document).scroll(function() { 
      scroll_start = $(this).scrollTop();
      if(scroll_start > offset.top) {
          $(".navbar-default").css('background-color', '#f0f0f0');
       } else {
          $('.navbar-default').css('background-color', 'transparent');
       }
   });
    }
});

Changing nav-bar color after scrolling? 可能重复

关于javascript - Bootstrap 导航栏将颜色更改为滚动条,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44214238/

相关文章:

javascript - 如何将文本附加到javascript数组的所有值

css - 绕过网页上的清除类型

Javascript,有没有办法调试/找出特定元素属性是从哪里继承的?

css - 在 Symfony2 中使用 Twitter Bootstrap 的最佳方式是什么?

html - 将导航栏切换按钮向右对齐

javascript - 在模态窗口中单击"is"后发送表单数据

javascript - 如何单独对输入标签应用样式?

javascript - Jquery 表单验证插件 - 如何通过额外步骤提交?

python - 如何覆盖所有模板的 flask_admin 样式?

javascript - 是否可以轻松地将 jquery/javascript 鼠标悬停延迟添加到仅 css 下拉菜单?