偵測頁面捲動位置並改變網址 hash 的值

最近寫網頁的一個需求,是像Mario這樣,除了視差滾動外,在往下走的過程中,url的hash也會跟著變化。

首先準備類似這樣的html,讓每個block的高度都是100%,保證每個block都會捲動到。
  1. <div class="block"><a href="#hash1">hash1</a></div>  
  2. <div class="block"><a href="#hash2">hash2</a></div>  
  3. <div class="block"><a href="#hash3">hash3</a></div>  
  4. <div class="block"><a href="#hash4">hash4</a></div>  

然後就寫code囉
  1. var currentHash = "#hash1"  
  2.     $(document).scroll(function () {   
  3.         $('.block a').each(function () {   
  4.             var top = window.pageYOffset;   
  5.             var distance = top - $(this).offset().top;   
  6.             var hash = $(this).attr('href');   
  7.             if (distance < 30 && distance > -30 && currentHash != hash) {   
  8.                 window.location.hash = (hash);   
  9.                 currentHash = hash;   
  10.             }   
  11.         });   
  12.     });  

參考來源
Change url when manually scrolled to an anchor?

Demo

留言

熱門文章