当导航栏使用Jquery到达某个位置时，将一个div替换为另一个div

Question

我有一个固定的顶部导航栏。该网站是一个页面滚动类型，有许多页面可以滚动（就像apple.com过去一样，滚动顺畅）。

我想要做的是当我的导航栏滚动到id为#example的div上时，从导航栏更改包含网站导航链接的div，其他div包含一条消息。

这是我尝试过的，但它不起作用，因为导航栏是固定的，因此它始终位于屏幕顶部，不会被视为滚动。它在实现单页滚动功能之前有效。有没有办法检测导航栏是否超过id为#example？

的div

$(document).scroll(function() {
    if ($(this).scroll() == $("#example")) <!-- When it worked i had a number of pixels instead of the id of the div-->
    {   
        $(".navigation-links").hide("slow", function() {});
        $(".message-div").show("slow", function() {});
    }
    else
    {   
        $(".message-div").hide("slow", function() {});
        $(".navigation-links").show("slow", function() {});
    }
});

这是我的导航栏：

<div class="fixed-nav-bar">
    <div class="navigation-links">
    </div>

    <div class="message-div" hidden>
        <p>Start Now</p>
    </div>
</div>

Answer 1

试试这个：

$(document).scroll(function() {
    if($( document ).scrollTop() >= $( "#example" ).offset().top && $( document ).scrollTop() < $( "#example" ).offset().top + 50) {
         $( ".navbar" ).text("second content");
    } else if($( document ).scrollTop() <= $( "#example" ).offset().top && $( document ).scrollTop() > $( "#example" ).offset().top - 50) {
        $( ".navbar" ).text("first content");
    }
});

demo：http://jsfiddle.net/UbnQ4/7/