如何使引导导航改变颜色时，滚动

How to make boostrap navigation change color when scrolling?

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

我正在使用Bootstrap构建一个网站模板。我想有导航是透明的，当用户加载页面，他/她正在看页面的顶部。标题是黑色的，所以透明的导航看起来更好。但是，我希望当用户开始向下滚动时，导航变暗，以便导航链接在浅色背景下可见。我已经看了其他几个模板的一些指导，但我仍然有麻烦，试图实现这在我自己的模板。我见过一些人使用javascript/jquery，但我不太擅长javascript，也不知道如何实现这一点。任何帮助都是非常感激的!

尝试如下:

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

这将在用户滚动50像素后切换类，如果你想改变它，只需将50更改为向下px的量，你想要切换类。

然后css如果你使用的是引导导航条结构，它将看起来像下面的渐变过渡:

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

这里是一个小提琴向您展示这个工作小提琴演示

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

$(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));
});
body {
height: 5000px;
width: 100px;
overflow: scroll;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<body></body>

感谢这个答案:

jQuery scroll()检测当用户停止滚动

$(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)在window对象上附加scroll事件监听器。并传递给它一个函数来执行该事件。

$(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。

设置元素的颜色。在这种情况下，我使用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:要使代码片段正常工作，您可能需要全屏

Bootstrap 4

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

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

<标题> 3 引导

你也可以使用Bootstrap Affix组件来监视滚动位置，而不是额外的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

相关文章：