Javascript Bootstrap 3.0：当内容移动到具有固定导航栏的目录下时触发

我已经在站点顶部修复了bootstrap 3.0导航栏。对于大型内容，当用户向下滚动时，站点内容将移动到其下方。 样本位于：

我想在用户滚动且页面内容移动到导航栏下方时在导航栏上设置css，并在用户向上滚动且内容不再位于导航栏下方时删除css。（css将向导航添加一个框阴影，并在内容移动到其下方时生成一条透明的细线）

我使用了以下js：

 function scroll() {        
        if ($(window).scrollTop() >= $('#content').offset().top) {
            $(".navbar-fixed-top").addClass('fadeOut');
        } else {
            $(".navbar-fixed-top").removeClass('fadeOut');
        }

    }    
    document.onscroll = scroll;

---

但正如您在示例中所看到的，它不能很好地工作，css在某些行之后应用。

我认为您只需要考虑导航栏的高度

if ($(window).scrollTop() > ($('#content').offset().top - 50)) {

---

有一种更干净的方法来完成我认为您在使用引导程序和他们的javascript模块之后所做的事情。查看他们的文档：

要实现您的目标，使用bootstrap，只需将其添加到要修改的div中，并根据需要更改偏移量值（但要使其正常工作，您需要确保调用的是bootstrap.js文件）：

在您的情况下，要更改导航栏，您将按如下方式应用它：

<div class="navbar navbar-default navbar-fixed-top" data-spy="affix" data-offset-top="60" data-offset-bottom="200">

这样做的结果是，您将在导航栏上应用3个类。当它接近顶部时，它会是。粘贴顶部，当它接近底部时，你会得到。粘贴底部，当两者都不存在时，你会得到。粘贴

---

.affix将使用默认引导css应用一个“固定”类，但您基本上可以使用偏移量值围绕这3个对象构建自己的特定类。默认情况下，您的导航栏可以应用dropshadow，但当应用dropshadow时，请将其粘贴到顶部，然后将其移除。

它实际上工作正常！！只需将

boxshadow

的颜色更改为

黑色

。。如图所示，当菜单下的四行已经移动时，它会显示出来，而不是第一行。我不是jQuery的人，但我的if语句不正确。@WilliamsGFX你能提供一个示例吗？！我跑不动了。请看，当内容开始在附件下移动时会触发哪个事件我认为这对您不起作用的原因是因为您的示例中没有包含引导javascript库。

<div class="navbar navbar-default navbar-fixed-top" data-spy="affix" data-offset-top="60" data-offset-bottom="200">