導航菜單指示器 - 滑動懸停，點擊和滾動

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，並通過將箭頭移動到正確的位置來對此作出反應。