Javascript 导航菜单指示器-悬停、单击和滚动滑动

我从来没有问过一个问题，但我已经使用了很多答案，所以我希望我希望达到的效果也能帮助其他希望达到同样效果的人

我目前正在一个客户的网站上工作，并已将其上载到我的dropbox，以回答以下问题：

它目前使用几个不同的脚本来实现以下目标：

（此脚本位于头部区域） 导航菜单是固定的，当您单击菜单链接时，页面将滚动到相关部分。 当页面滚动到相关部分时（单击后），一个类（.act）将添加到活动菜单链接中。当用户使用鼠标/轨迹板或其他工具在页面上下滚动时，也会添加.act类

（此脚本位于页面底部） 导航栏链接还添加了另一种效果： 当您将鼠标悬停在导航项上时，导航菜单指示箭头（带有箭头背景图像的div）将滑过悬停链接

所以这就是我想要发生的事情

目前，导航菜单指示箭头仅在悬停时滑动。我希望它在单击时滑动到活动链接，并保持在那里，直到用户悬停在另一个链接上。我当前的脚本有点问题，菜单指示器并不总是滑动到活动链接

我还希望导航菜单指示器箭头在用户滚动页面时滑动到活动链接

这是可以实现的吗

相关脚本

<script type="text/javascript">
$('#header')
  .css('position', 'relative')
  .append(
    $('<div>').attr('id', 'main-menu-indicator')
  )
  menuHover = function(which){

    if(which==null)
      which = $('ul#main-menu a.act')
    $('#main-menu-indicator')
      .stop(true, false)
      .animate({
        left: ($(which).offset().left - $('#header').offset().left +
          $(which).width()/2 + parseInt($(which).css('paddingLeft')) -
          $('#main-menu-indicator').width()/2 )
      }, 500)
  } 

$('ul#main-menu a')
  .hover(
    function(){
      menuHover(this)
    },
    function(){
      menuHover(null)
    }
  ) 
</script>

脚本1-平滑滚动到部分，并在滚动时激活“act”类：

<script type="text/javascript">
  jQuery(document).ready(function( $ ) {
    $('nav a').on('click', function() {
      var scrollAnchor = $(this).attr('data-scroll'),
      scrollPoint = $('section[data-anchor="' + scrollAnchor + '"]')
        .offset().top + 1;
      $('body,html').animate({
        scrollTop: scrollPoint
      }, 500);
      return false;
    })

    $(window).scroll(function() {
      var windscroll = $(window).scrollTop();
      if (windscroll >= 100) {
        $('#wrap section').each(function(i) {
          if ($(this).position().top <= windscroll + 200) {
            $('nav a.act').removeClass('act');
            $('nav a').eq(i).addClass('act');
          }
        });
      } else {
        $('nav').removeClass('fixed');
        $('nav a.act').removeClass('act');
        $('nav a:first').addClass('act');
      }

    }).scroll();
  })
</script>

jQuery（文档）.ready（函数（$）{
$（'nav a'）。在（'click'，function（）上{
var scrollAnchor=$（this）.attr（'data-scroll'），
scrollPoint=$（'section[data-anchor=“”+scrollAnchor+“]”节）
.offset（）.top+1；
$（'body，html'）。设置动画({
scrollTop:scrollPoint
}, 500);
返回false；
})
$（窗口）。滚动（函数（）{
var windscroll=$（window.scrollTop（）；
如果（风切变>=100）{
$（“#包装部分”）。每个（函数（i）{
如果可以使用（$（this）.position（）.top来获得所需的效果，那么它可能比编写自己的解决方案更容易实现。可以使用
激活
事件启动动画

在您的情况下，您可以设置
，您当前有一个
部分
和一篇
文章
具有相同的
id
，您应该去掉其中的一个，因为拥有多个具有相同
id
的元素是无效的html，它可能会破坏一些东西。例如，在
文章中保留
id
：
。在页面上包括ScrollSpy脚本并添加：

$('.header').scrollspy({activate: function() {
  // Add your logic here.
  }
});

在激活功能中，
$（'nav li.active'）
将为您提供当前激活的
li
，通过该信息，您应该能够确定箭头的移动位置，然后您可以运行平滑滚动箭头代码将箭头移动到正确的位置

现在ScrollSpy负责在用户滚动到某个位置时调用
activate
，您可以通过将箭头移动到正确的位置来对此做出反应。
感谢您的回答，但是我不知道如何实现问题的滑动箭头部分。除非我没有得到什么东西？我已经编辑了答案，向您展示了我是如何使用它的我认为这会奏效。我对代码的理解有点透彻——上面的代码是我找到并定制的片段。为此编写代码超出了我目前的能力。我想解决这个问题的另一种方法是让菜单指示器箭头跟随class.act的链接，然后当页面滚动代码激活.act c时就这样做了如果箭头跟随它。那么我所需要的就是将.act类添加到悬停链接中，箭头将在悬停、单击和滚动时跟随它。问题是我不知道如何做。