导航栏告诉你在哪里

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();
});

Answer 2

很难，但也许这个 FIDDLE 会让你入门 - 它非常暴力且不优雅。

我已经根据经验调整了 JS，以便当字幕到达窗口中间时，列表项变为红色。您也许可以使用您提供的代码（#section 的位置）。

JS

var windowscrolllocation;

$(window).scroll(function(){
  var windowscrolllocation = $(this).scrollTop();
  $('.putmehere').html(windowscrolllocation);
  if (windowscrolllocation > 0 && windowscrolllocation < 120)
     {
      $('.b1').css('background-color', 'red');
      } else {
      $('.b1').css('background-color', 'white');
              }
  if (windowscrolllocation > 120 && windowscrolllocation < 260)
     {
      $('.b2').css('background-color', 'red');
      } else {
      $('.b2').css('background-color', 'white');
              }
  if (windowscrolllocation > 260 && windowscrolllocation < 300)
     {
      $('.b3').css('background-color', 'red');
      } else {
      $('.b3').css('background-color', 'white');
              }
  if (windowscrolllocation > 300 && windowscrolllocation < 350)
     {
      $('.b4').css('background-color', 'red');
      } else {
      $('.b4').css('background-color', 'white');
              }

});