Question

我正在使用Bootstrap 3并希望在用户滚过页面上的大标题图像时实现this effect。我需要导航栏的背景从透明变为白色。我查看了他们的代码，我知道它是用javascript完成的，甚至看到WHERE它正在发生我认为（在那个JS中查找ID'＃main-header'）......

不知道高级Javascript，我正在寻找一种方法，当滚动到某一点时，将其应用到我的导航栏。我的代码的类称为“navbar”，我希望它在通过“#main”时变为白色。如果您需要更多信息，请告诉我，如果有人想帮忙，请提前感谢！

Answer 1

完成您要做的事情的最简单方法是结合使用一些简单的javascript（在这种情况下为jQuery）和CSS3过渡。

我们将使用JS检查每个滚动事件的窗口滚动位置，并将其与#main元素底部的距离进行比较 - 如果滚动位置较大，那么我们将应用一个类body指示我们已经滚过#main，然后我们将使用CSS来定义该“状态”的导航样式。

所以，我们的基本标记：

<nav class="nav">
    <a href="#" class="logo">[logo]</a>
</nav>
<div id="main">#main</div>
<div id="below-main">#below-main</div>

我们的javascript：

// get the value of the bottom of the #main element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $('#main').offset().top + $('#main').height();

// on scroll, 
$(window).on('scroll',function(){

    // we round here to reduce a little workload
    var stop = Math.round($(window).scrollTop());

    if (stop > mainbottom) {
        $('.nav').addClass('past-main');
    } else {
        $('.nav').removeClass('past-main');
    }

});

而且，我们的风格：

.nav {
    background-color:transparent;
    color:#fff;
    transition: all 0.25s ease;
    position:fixed;
    top:0;
    width:100%;
    background-color:#ccc;
    padding:1em 0;
    /* make sure to add vendor prefixes here */
}

.nav.past-main {
    background-color:#fff;
    color:#444;
}

#main {
  height:500px;
  background-color:red;
}

#below-main {
  height:1000px;
  background-color:#eee;
}

关于Codepen

的工作示例

这就是我做的here。我还使用了一些滚动限制和更复杂的样式语义，但这是它的要点。

Answer 2

如果您正在使用Twitter Bootstrap，可以使用'Affix'plugin

来实现

设置here is the documentation

非常简单

Answer 3

您可能只需使用javascript element.scrollTop以及Jquery addClass和removeClass。虽然没有尝试过。

以下是获取滚动条位置的溢出链接：How to get scrollbar position with Javascript?

滚动浏览锚点时，如何让导航栏更改CSS类？

3 个答案: