如何让我的导航栏在滚动通过锚点时更改 CSS 类？

Posted 2023-03-06

【中文标题】如何让我的导航栏在滚动通过锚点时更改 CSS 类？

【英文标题】：How do I make my navbar change CSS class upon scrolling past an anchor point?

【发布时间】：2013-12-15 02:00:54

【问题描述】：

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

除了不了解高级 Javascript 之外，我正在寻找一种在滚动超过某个点时将其应用于导航栏的方法。我的代码的类称为“导航栏”，我希望它在通过“#main”时变成白色。如果您需要更多信息，请告诉我，如果有人愿意提供帮助，请提前感谢！

【问题讨论】：

***.com/questions/13864785/…

【参考方案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。我还使用了一些滚动节流和更复杂的样式语义，但这就是它的要点。

【讨论】：

嘿！我刚看到这个。非常感谢您的回复。实际上，我最终让它与 Bootstrap 的词缀一起工作，它是用于一个班级项目 [ourdesign.us/2013/12/13/…，我的是右下角.. 还没有把它放在我自己的投资组合中]。真棒，真棒，与白板网站的工作真棒，我认真地看了很多次以寻找灵感。当我无疑想在没有 Bootstrap 安全网的情况下最终再次实现此效果时，我会牢记这一点。

【参考方案2】：

如果您使用 Twitter Bootstrap，可以使用“Affix”plugin

设置起来非常简单，here is the documentation

【讨论】：

非常感谢！我现在正在尝试实现它，但它不工作/我不确定如何准确地工作......我的导航周围有<div data-spy="affix" data-offset-top="200"></div>，然后在我的CSS中我有.affix，@987654327 @ 和 .affix-bottom。但是，我不确定在哪里/如何引用您在页面上滚动过去的锚点以及我是否遗漏了什么。抱歉，我很不擅长找出文档..

好的，这里已经介绍过了：***.com/a/13151016/1031184 一个好心人实际上构建了一个 jsfiddle 来展示它应该如何工作，所以请到这里看看，这很清楚：jsfiddle.net/namuol/Uaa3U

【参考方案3】：

您可能只使用 javascript element.scrollTop 以及 Jquery addClass 和 removeClass。不过自己没试过。

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