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/

保持section和ul项的class和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');
              }

});

导航栏，告诉您的位置

2 个答案: