当用户手动滚动时，如何突出显示锚点链接？

Question

很抱歉这篇文章很长，但我希望包含所有可能有用的信息。

我有一个单页网站，由几个垂直堆叠的div组成。我使用浮动导航栏和softscroll.js使锚点链接在被点击时移动到对应的div。

我是一名前端设计师，但通过这个网站和数小时的试错和搜索，我已经成功让所有元素工作。（自动调整div高度、高亮点击的锚点链接、滚动等）

我已经设置了当点击锚点链接时，它的类会变为“active”。这个效果非常好。但我也想在用户手动滚动到div时触发相同的效果。

我查看了这篇文章中使用的代码，因为我已经看到过几次。但它替换了我已经运行的一些代码，仍然无法高亮显示。

以下是我用于激活锚点的代码：

// JS for highlight selected button
$(function() {
    $("a").click(function() {
      // remove classes from all
      $("a").removeClass("active");
      // add class to the one we clicked
      $(this).addClass("active");
   });
});

我正在使用这个方法根据窗口大小调整div的大小。不确定这是否相关，但在此提供：

// JS for Div Height Auto Resize 
$(document).ready(function(){
  resizeDiv();
});

window.onresize = function(event) {
  resizeDiv();
}

function resizeDiv() {
  vpw = $(window).width();
  vph = $(window).height();
  $('.layoutblock').css({'height': vph + 'px'});
}

这是菜单的HTML代码：

<div id="navigation">
<ul>
<li><a href="#composition" ><img src="images/icons/compicon.png" alt="composition" width="32" height="36" border="0" align="middle" />Composition</a></li>
<li><a href="#creative"><img src="images/icons/designicon.png" alt="Large Format" width="36" height="33" border="0" align="middle" /> Creative</a></li>
[...]
</ul>
</div>

...以及菜单CSS：

  #navigation {
    background-color: #F60;
    position: fixed;
    height: 100%;
    width: 60px;
     -moz-transition:width .5s;
    -webkit-transition:width .5s;
    -o-transition:width .5s;
    transition:width .5s;
    overflow: hidden;
    left: 0px;
    top: 0px;
    z-index: 99;
    padding-top: 30px;
    margin-left: 0px;
}

#navigation:hover {
    margin-left: 0px;
    width: 190px;
}

#navigation li {
    list-style: none;
    margin-left: -40px;

}

#navigation img {
    padding-left: 5px;
    padding-right: 20px;
}
#navigation li a {
    font-family: "Proxima N W01 Smbd", Arial, Helvetica;
    font-size: 14px;
    display: block;
    color: white;
    font-weight:bold;
    text-decoration: none;
    text-transform:uppercase;
    line-height:26px;
    padding-left:5px;
    padding-right: 5px;
    padding-top: 10px;
    height: 50px;
    white-space: nowrap;
}

a.active{
    background-color: #333;
}

最后，这是测试页面的网址：[为了安全起见已删除]。

- SNSAD

Answer 1

我在这里找到了答案：如何在页面滚动时更改活动菜单项？，这导致了一个可以完美工作的演示。

最终我使用了代码来监视锚点标签，并根据它们来更改菜单。它甚至包括软滚动和单击高亮功能，因此我能够摆脱我之前使用的其他片段。

另外需要注意的是：尽管演示中正常工作，但我在我的网站上花费了很多时间才使它正常工作。结果发现我需要将该片段放置在body的末尾，以便在注册锚点之前加载所有内容。如果其他人有同样的问题，这是一个提示。

- SNSAD

Answer 2

你可以使用jQuery的on方法并监听scroll事件。

- Daveee

---

那太好了。你有什么想法解决这个问题吗？由于div垂直调整大小，滚动事件是否有助于告诉哪个div在视口中？我已经搜索了一些相关信息，似乎它可以告诉鼠标向上/向下滚动，但无法确定位置？ - SNSAD

$('.divYouWantToListenTo').on('scroll', function() {do stuff;}) 可以翻译为：当 .divYouWantToListenTo 元素滚动时，执行一些操作。 - Daveee

谢谢！但是我查看了文档和这里的示例：http://api.jquery.com/scroll/，我找不到任何实现{do stuff}的示例，当特定的div在视口中时。据我所知，监听器只是在div滚动时监听。我正在寻找一个“如果div x在视口中，则使锚点X变为红色。如果div y在视口中，则使锚点y变为红色。”我有误解吗？ - SNSAD

这篇文章：https://dev59.com/5mkv5IYBdhLWcg3wfA4P 似乎表明可以使用scrolltop，但我不想改变css，而是要添加一个类。此外，它需要与我当前正在使用的其他onClick脚本协同工作。 - SNSAD