使用ScrollTo和LocalScroll插件時突出顯示菜單項

Question

我使用ScrollTo和LocalScroll插件將漂亮的滾動應用於錨點導航this site。

我希望總是有正確的菜單項突出顯示爲用戶滾動滾動條。

我已經看到這個question and answer但我恐怕我不知道如何修改它成功！ （我的導航使用#about，#contact等，而不是#section，#section2等，但我已經給每個部分的section1，section2等一個名稱，如在本例中）

我也曾嘗試One Page Navigation插件，它配備了這一功能是默認情況下，但它與我的下拉菜單:(

感謝您抽出寶貴的時間來閱讀這篇衝突。希望能幫到你！

Answer 1

如果你想推廣你的代碼做同樣的事情都當你參觀#section1通過e xternal鏈接，並且內部通過<a href="#section1">Section 1</a>，您可以收聽hashchange事件。它在滾動時不會更新，但如果您將代碼概括化並使其可重用，我相信將這些技術結合起來很容易。

嘗試Ben Alman's jQuery hashchange event plugin並添加一個調用相同函數的回調函數。你也許想和jQuery urlInternal: Easily test URL internal-, external-, or fragment-ness一起使用它，也許還要使用Ben Alman的jQuery BBQ: Back Button & Query Library。

下面是一些代碼，可以從項目中快速調整，以相同的方式使用它來激活選項卡中的不同選項卡。 （我用上面提到的所有三個插件，但我不記得，如果所有的人都對這個片段是必要的。）

(function() { 
    var menuLinksSelector = "#menu-main-menu a", 
     menuLinkHighlightClass = "current"; 

    $.fn.extend({ 
     filterLinksToFragment: function(fragment) { 
      var $this = $(this), 
       $filtered = $this.filter("a:urlFragment").filter(function() { 
        var $this = $(this), 
         thisFragment = $.param.fragment($this.attr('href')); 

        return (thisFragment === fragment); 
       }); 

      return $filtered; 
     } 
    }); 

    function highlightMenuItem(fragment) { 
     var $menuLinks = $(menuLinksSelector), 
      $selectedMenuLink = $menuLinks.filterLinksToFragment(fragment); 

     $menuLinks.removeClass(menuLinkHighlightClass); 
     $menuItem.addClass(menuLinkHighlightClass); 
    } 

    function highlightCurrentMenuItem() { 
     var currentFragment = $.param.fragment(); 

     if (currentFragment !== undefined && currentFragment !== "") { 
      highlightMenuItem(currentFragment); 
     } 
    } 

    $window.on('hashchange', function() { 
     // Activate the current URL's #part-anything link 
     highlightCurrentMenuItem(); 
    }); 

    // Trigger the event (useful on page load). 
    $window.hashchange(); 
}()); 

如果您使用此代碼，您將不再需要使用.click(...)處理程序中在你的問題中，除了可能取消點擊事件，因爲你有滾動插件。