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

Question

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

我目前正在处理客户的网站，并将其上传到我的 Dropbox 以解决这个问题： http://dl.dropboxusercontent.com/u/62164771/stage/cw/index16042013.html

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

（此脚本在头部区域） 导航菜单是固定的，当您单击菜单链接时，页面会滚动到相关部分。 当页面滚动到相关部分时（被点击后），一个类 (.act) 被添加到活动菜单链接中。当用户使用鼠标/触控板等在页面中上下滚动时，也会添加 .act 类。

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

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

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

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

这可以实现吗？

相关脚本

脚本 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>

脚本 2 - 用于将主菜单指示器滑动到悬停和活动链接的位置

<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>

Answer 1

您可以使用Bootstrap ScrollSpy 来获得所需的效果，它可能比编写自己的解决方案更容易实现。您可以使用activate 事件启动动画。

在您的情况下，您可以设置<a href="#top">，您目前有一个section 和一个article 具有相同的id，您应该去掉其中一个，因为拥有多个是无效的html具有相同id 的元素，它可能会破坏事物。例如，将id 保留在article 上：<article class="top area" id="top">。在页面中包含 ScrollSpy 脚本并添加：

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

在激活函数$('nav li.active') 内将为您提供当前活动的li，使用该信息您应该能够计算出将箭头移动到哪里，然后您可以运行平滑滚动箭头代码来移动箭头到正确的地方。

现在 ScrollSpy 会在用户滚动到某个位置时调用 activate，然后您通过将箭头移动到正确的位置来对此做出反应。