Bootstrap 4

Question

我正在使用Bootstrap构建网站模板。当用户加载页面并且他/她正在查看页面顶部时，我希望导航是透明的。标题是黑暗的，因此透明导航看起来更好。但是，我希望当用户开始向下滚动时，导航变暗以使导航链接在浅色背景下变得可见。我已经查看了其他几个模板以获得一些指导，但我仍然无法在我自己的模板中实现此功能。我发现有些人使用javascript / jquery，但我对javascript不太了解，并且不知道如何实现这一点。任何帮助都非常感谢！

Answer 1

尝试以下方法：

$(window).scroll(function(){
    $('nav').toggleClass('scrolled', $(this).scrollTop() > 50);
});

如果您想要更改它，则会在用户滚动50像素后切换课程，只需将50更改为您想要切换课程的px数量。

然后css，如果你使用bootstraps导航栏结构，它将看起来像以下的淡入淡出过渡：

.navbar-default{
  transition:500ms ease;
  background:transparent;
}
.navbar-default.scrolled{
  background:#000;
}

这是一个向你展示这个工作Fiddle Demo

的小提琴

Answer 2

＆＃13;

$(window).scroll(function() {
  var $nav = $('#nav'),
    scroll = $(window).scrollTop();
  if (scroll >= 34) {
    $nav.addClass('dark-background');
  } else {
    $nav.removeClass('dark-background');
  }
});

＆＃13;

.dark-background {
  background-color: gray;
}
#nav {
  background-color: transparent;
}

＆＃13;

Answer 3

＆＃13;

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $("body").css('background-color', 'red')
    $.data(this, 'scrollTimer', setTimeout(function() {
        $("body").css('background-color', 'white')
        console.log("Haven't scrolled in 250ms!");
    }, 250));
});

＆＃13;

body {
height: 5000px;
width: 100px;
overflow: scroll;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<body></body>

＆＃13;

归功于这个答案：

jQuery scroll() detect when user stops scrolling

$(window).scroll(function() {
    clearTimeout($.data(this, 'scrollTimer'));
    $("body").css('background-color', 'red')
    $.data(this, 'scrollTimer', setTimeout(function() {
        $("body").css('background-color', 'white')
        console.log("Haven't scrolled in 250ms!");
    }, 250));
});

只是为了打破正在发生的事情：

1）在scroll对象上附加window事件侦听器。并传递一个函数来执行该事件。

$(window).scroll(function(){})

2）clearTimeout与setTimeout齐头并进。如果您打开浏览器的开发者控制台并输入

$(window).data()

它应该返回一个空对象，因为您可能尚未为其分配任何内容。现在，如果你输入

$(window).data('myData', 'my_value')
$(window).data() //=> returns an -> Object {myData: "my_value"}

您还可以访问像$.data(element)这样的元素的数据：

$.data(window) //=> returns an -> Object {myData: "my_value"}

对#clearTimeout的第一次调用是针对空属性调用的，因为scrollTimer尚未分配给window.data() object。

3）设置元素的颜色。在这种情况下，我使用body作为示例，但您需要输入正确的选择器：

$('body').css('background-color', 'red')

4）使用#setTimeout函数在经过一段时间后返回原始颜色。

$.data(this, 'scrollTimer', setTimeout(function() {
    $('body').css('background-color', 'white')
    console.log("Haven't scrolled in 250ms!");
}, 250));

函数内的this代表window：

$.data(this, 'scrollTimer', setTimeout(function() {...}, 250)

与：

相同

$.data(window, 'scrollTimer', setTimeout(function() {...}, 250)

它正在访问window对象

中的数据

PS：要使代码段起作用，您可能需要全屏显示

Answer 4

Bootstrap 4

Bootstrap 4上不再存在词缀组件，但ScrollSpy组件不存在。

https://www.codeply.com/go/aN4tfy0zU0

Bootstrap 3

您还可以使用Bootstrap Affix component来观看滚动位置，而不是额外的jQuery / JavaScript。只需为导航栏定义.affix-top和.affix CSS。

@media (min-width:768px) {
    .affix-top {
      /* navbar style at top */
      background:transparent;
      border-color:transparent;
      padding: 15px;
      -webkit-transition:all 0.5s ease;
      -moz-transition:all 0.5s ease; 
      -o-transition:all 0.5s ease;         
      transition:all 0.5s ease;  
    }
}

并设置您希望导航栏更改样式的位置（即;从顶部400px）

<div class="navbar navbar-inverse navbar-fixed-top" data-spy="affix" data-offset-top="400">

工作演示： http://www.codeply.com/go/xp2fY6sVHP

滚动时如何使boostrap导航改变颜色？

4 个答案:

Bootstrap 4

Bootstrap 3