jquery - 导航栏告诉您您所在的位置

Question

我不知道如何问这个问题，所以就这样:

我有一个网页，您可以在其中单击导航栏，它会向下或向上滚动到该部分所在的位置，但您也可以手动滚动到您想要的任何位置。

我的问题是，我需要在导航栏上突出显示当前查看的部分(例如，稍微亮一点的颜色)，这很容易通过单击完成，但似乎无法使其与滚动一起使用(两者都向上)和向下)。我尝试使用 JQuery 库 waypoints ，但我觉得这对我来说似乎有点复杂(JQuery 语法有点令人困惑)并且从未在向上和向下滚动时激活它。
有一个简单的解决方案吗？你会推荐什么？为了简单起见，如果没有 JQuery，我会更高兴。

我希望我说清楚了，英语不是我的主要语言，这是我在 SO 上发表的第一篇文章。

$( "#section1" ).waypoint(function(direction){
    $('.highlight').removeClass('highlight');   
    $(".b1").addClass('highlight');
},{offset:'2px'});

$( "#section2" ).waypoint(function(direction){
    $('.highlight').removeClass('highlight');
    if (direction == 'Up'){
        $(".b1").addClass('highlight');
    }else{
        $(".b2").addClass('highlight');
    }
},{offset:'2px'});

之后还有另一组与 #section2 相同的部分，但带有其他数字，但此代码仅对该部分的顶部进行更改。 这是该部分:

<div class="section" id="section2">
        <h2>Section 2</h2>
        <p>
            My Spectre around me night and day
            Like a wild beast guards my way;
            My Emanation far within
            Weeps incessantly for my sin.
        </p>

    </div>

这是导航

<div class="nav"><ul>
    <li><a href="#section1" class="b1"></a></li>
    <li><a href="#section2" class="b2"></a></li>
    <li><a href="#section3" class="b3"></a></li>
    <li><a href="#section4" class="b4"></a></li>
    <li><a href="#section5" class="b5"></a></li>
    <li><a href="#section6" class="b6"></a></li>
    <li><a href="#section7" class="b7"></a></li>
</ul></div>

感谢您的帮助。

Answer 1

您好，我已经为您制定了自己的解决方案，希望您理解!

请参阅此处的 JSFiddle:http://jsfiddle.net/A6nDa/

保持节和 ul 元素的类和 id 与我的相同/内联非常重要

HTML + 导航

<div class="nav">
    <ul>
        <li><a href="#section1" id="nav-section-1">Section 1</a></li>
        <li><a href="#section2" id="nav-section-2">Section 2</a></li>
    </ul>
</div>

<div class="section" id="section-1">
        <h2>Section 1</h2>
        <p>
            My Spectre around me night and day
            Like a wild beast guards my way;
            My Emanation far within
            Weeps incessantly for my sin.
        </p>
</div>

<div class="section" id="section-2">
        <h2>Section 2</h2>
        <p>
            My Spectre around me night and day
            Like a wild beast guards my way;
            My Emanation far within
            Weeps incessantly for my sin.
        </p>
 </div>

虚拟样式

.nav ul {
    background: black;
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    margin: 0;
    padding: 0;
}
.nav ul a {
    color: white;
}
.nav ul a.highlight {
    color: orange;
}
#section-1 {
    position:absolute;
    top:100px;
    padding:10px;
    background:green;
}
#section-2 {
    position:absolute;
    top:300px;
    padding:10px;
    background:purple;
    margin-bottom: 1000px;
}

JQuery

function onScreen() {
    // Check if the top of the page collides with each section
    $('.section').each(function() {
        var windowScroll = $(document).scrollTop();
        var navHeight = $('.nav ul').height();

        // Complex line checks if windowScroll (top of page) + nav bar hits Section Top / Bottom
        if( windowScroll + navHeight >= $(this).offset().top && windowScroll + navHeight <= $(this).offset().top + $(this).height()) {
            // This section is active! Add Highlight
            $('.nav ul a#nav-' + $(this).attr('id')).addClass('highlight');
        } else {
            // No - Remove highlight class
            $('.nav ul a#nav-' + $(this).attr('id')).removeClass('highlight');
        }

    });
}

$(window).on('scroll resize', function () {
    onScreen();
});