jQuery更改哈希（片段標識符），同時向下滾動頁面

我正在構建一個分頁器網站。例如。每個頁面（總共5個）位於一個大頁面上，主菜單固定在頂部。當你點擊一個菜單鏈接時，它將你滑動到那個頁面的錨點標籤上，點擊的菜單項獲得一個「活動的」CSS類。jQuery更改哈希（片段標識符），同時向下滾動頁面

我現在想要做的是允許用戶滾動自己，但仍然有菜單「活動」項和URL哈希值的變化。

所以我的問題基本上是如何知道用戶何時滾動到不同的頁面，以便我可以更新菜單和URL哈希（片段標識符）。

感謝

2011-03-15 Owen

最佳跟上時代的方式來示例代碼這是否使用HTML5 History API。查看[這個相關的問題]（https://stackoverflow.com/questions/1397329/how-to-remove-the-hash-from-window-location-with-javascript-without-page-refresh/5298684#answer-5298684 ）更多細節。 – rugk 2016-06-29 01:29:19

其可能的，但也有你的頁面的要求（我的解決方案正常工作）：

您的網頁有申報單（或任何部分）有唯一的ID（我希望你不使用錨<a>要分開的）

比你可以使用這樣的代碼：

$(document).bind('scroll',function(e){ 
    $('section').each(function(){ 
     if (
      $(this).offset().top < window.pageYOffset + 10 
//begins before top 
     && $(this).offset().top + $(this).height() > window.pageYOffset + 10 
//but ends in visible area 
//+ 10 allows you to change hash before it hits the top border 
     ) { 
      window.location.hash = $(this).attr('id'); 
     } 
    }); 
});

像這樣

<section id="home"> 
    Home 
</section> 
<section id="works"> 
    Works 
</section> 
<section id="about"> 
    About 
</section>

HTML

來源

2011-03-15 18:02:35 Valerij

請問你可以發佈代碼去「window.location.hash」部分。我用window.location.hash = $（this）.attr（'href'），但是我爲每個哈希獲得#undefined。謝謝 – suludi 2013-07-22 16:54:54

@suludi這些部分沒有'href'但是'id' – Valerij 2013-07-23 11:25:48

對不起，我立即注意到了我自己。但事情是，它不允許我滾動。我無法在我正在處理的網站上滾動，但腳本過多（滾動），所以我認爲這可能是衝突。所以我創建了一個包含4個部分的簡單幹淨頁面，但它仍然不允許我滾動。這裏是鏈接，非常感謝：http://madebym.me/test/scroll-hash – suludi 2013-07-24 20:17:20

您正在尋找.scroll()事件處理程序

來源

2011-03-15 17:43:19 Andrew

與jQuery你可以使用scrollTop的方法找到滾動位置，然後把它比作說，頁面上的元素的位置，制定出在頁面上他們在哪裏並相應地更新。

來源

2011-03-15 17:45:02

我對這個固定高度段內容有相同的問題，它將根據滾動更改散列。多少代碼不適用於其他Chrome瀏覽器。而且還操縱DOM在滾動那麼它需要很長的該事件得到處理是指http://www.smashingmagazine.com/2013/06/10/pinterest-paint-performance-case-study/下面是我如何解決這個

(function() { 
    // Find all top,bottom and Hash of each sections, 
    // Do this only if the section height remain the same always 
    // Move this into the step() if your section height does change. 
    // e.g. browser resize 
    // 
    var section = $.map($("section"), function (e) { 
     var $e = $(e); 
     var pos = $e.position(); 
     return { 
      top: pos.top, 
      bottom: pos.top + $e.height(), 
      hash: $e.attr('id') 
     }; 
    }); 

    //Checking scroll 
    var top = null; 
    var changed = false; 
    var currentHash = null; 

    $(window).scroll(function() { 
     var newTop = $(document).scrollTop(); 

     changed = newTop != top; 
     if (changed) { 
      top = newTop; 
     } 

    }); 

    // You wouldn't want to keep checking the scroll state as 
    // it affects the browser performance when it's accessing 
    // DOM and reduce your FPS (Frame per Seconds) for scrolling 
    // 
    function step() { 
     if (!changed) { 
      // Top did not change 
      return setTimeout(step, 200); 
     } 
     var count = section.length; 
     var p; 

     while (p = section[--count]) { 
      if (p.top >= top || p.bottom <= top) { 
       continue; 
      } 
      if (currentHash == p.hash) { 
       break; 
      } 
      var scrollTop = $(document).scrollTop(); 
      window.location.hash = currentHash = p.hash; 
      // prevent browser to scroll 
      $(document).scrollTop(scrollTop); 
     } 
     setTimeout(step, 200); 
    } 
    setTimeout(step, 200); 
})();

Demo

來源

2014-04-16 07:01:05 ahkeno

jQuery更改哈希（片段標識符），同時向下滾動頁面

回答

相關問題