使用Skrollr滾動更新瀏覽器的URL哈希值/錨點

因此，您的頁面由多個部分組成，每個部分都有一個唯一的ID或錨點，您需要在滾動時使用當前部分的ID /錨點更新瀏覽器的URL。使用Skrollr滾動更新瀏覽器的URL哈希值/錨點

PS我不是問一個問題，而是分享一個食譜。所有相關的代碼示例和演示都在答案中，所以請不要對此問題投反對票。

2014-06-14 lolmaus - Andrey Mikhaylov

這可能與Skrollr！但你需要幫助他。

首先，創建一個帶有鏈接的菜單頁面部分： >

<nav><ul> 
    <li><a href='#home'>Home</a></li> 
    <li><a href='#about'>About</a></li> 
    <li><a href='#goods'>Goods</a></li> 
    <li><a href='#services'>Services</a></li> 
</ul></nav>

領帶每個<li>到相應的頁面部分與Skrollr的data-anchor-target（讀this的信息）。再加入一些Skrollr轉換：

<li 
    data-anchor-target="#about" 
    data--200-center-bottom="opacity: 0.2;" 
    data--200-center-top="opacity: 1;" 
    data-200-center-bottom="opacity: 1;" 
    data-200-center-top="opacity: 0.2;" 
>

從現在起，Skrollr將skrollable-between類名適用於那些<li>元素，其對應的頁面章節目前在頁面上可見。我們要利用這個功能！：D

初始化Skrollr時，可以將回調分配給render參數。這個回調會在滾動期間觸發。在該回調中，您需要：

檢索當前活動的菜單項（具有skrollable-between classname的那些項目）的列表。
確定哪些活動菜單項要考慮當前。如果只有一個活動項目，則選擇是顯而易見的。如果有不止一個，我建議你選擇第二個。
檢索當前菜單項的鏈接的href屬性的值。
使用該值更新瀏覽器URL。

請注意，Skrollr劫持了頁面加載時將頁面滾動到當前項目的香草瀏覽器行爲。所以我們必須解決這個問題。更糟糕的是，Skrollr在頁面加載時多次執行render回調，將瀏覽器的URL哈希值重置爲第一頁部分的哈希值。要解決此問題，請執行以下操作：

在初始化Skrollr之前，請從瀏覽器的URL中讀取散列。
設置500-1000毫秒的計時器，該計時器將重置哈希滾動頁面到對應部分的開頭。最簡單的方法是使用skrollr-menu插件的the click method。

計時器的方法有點醜。如果你有更好的主意，請留下評論here。

您需要解決的另一個問題是Skrollr在滾動期間每秒執行render回調數百次。你絕對不希望你的回調運行那麼多：這是完全沒有必要的，並且會降低瀏覽器速度。

所以你需要遏制你的回調。如果您恰好在項目中使用了標準庫擴展插件（如Lo-Dash），請使用它的throttle方法。如果你不這樣做，你可以使用微小的jquery.timer-tools插件。

下面是一個涵蓋上述所有的演示，寫在舒適的CoffeeScript：

演示：http://jsbin.com/gozota/7
來源：http://jsbin.com/gozota/7/edit?html,css,js

來源

2014-06-14 14:54:52

使用Skrollr滾動更新瀏覽器的URL哈希值/錨點

回答

相關問題