javascript - Bootstrap 3.0 : Trigger when content moved under a with fix nav bar

Question

我已经修复了站点顶部的 bootstrap 3.0 导航栏。对于大型内容，当用户向下滚动时，网站内容会移动到下方。样本位于:http://www.bootply.com/wgOrXN2R2b

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

我在下面使用了 js:

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

    }    
    document.onscroll = scroll;

但是正如您在示例中看到的那样，它无法正常工作并且 css 在某行之后应用。

Answer 1

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

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