导航菜单指示器 - 滑动悬停，点击和滚动

Question

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

我目前工作的一个客户的网站，并将它上传到我的Dropbox这个问题： http://dl.dropboxusercontent.com/u/62164771/stage/cw/index16042013.html

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

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

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

原来这就是我想要发生

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

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

这是可以实现的吗？

相关脚本

脚本1 - 顺利滚动到部分并激活 '行为' 类滚动时：

<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，并通过将箭头移动到正确的位置来对此作出反应。