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

如果您正在使用Twitter Bootstrap,可以使用'Affix' 插件实现

设置起来非常简单,这里是文档

完成你要做的事情的最简单方法是结合使用一些简单的javascript(在这种情况下为jQuery)和CSS3过渡.

我们将使用JS检查每个滚动事件上的窗口滚动位置,并将其与#main元素底部的距离进行比较 - 如果滚动位置较大,那么我们将一个类应用于主体以指示我们滚过#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的一个工作示例

这是我做到了这里.我还使用了一些滚动限制和更复杂的样式语义,但这是它的要点.