2013年9月21日 星期六

偵測瀏覽器的 scrollbar 位置

有些網頁太長或太寬時,會想把某些東西固定在某個位置
在 jQuery 中已經有包裝好的函式 scrollTop() 和 scrollLeft(),可以簡單地做到偵測的動作。

例如我想做的是當捲軸往下捲到選單會看不見的時候,就要自動把選單往下挪動。
實作方法如下:
$(window).scroll(function() {
  // Get the position of the current scroll.
  var top_position = $(this).scrollTop();

  if ( top_position > 144){
    // Let the item move with scrolling.
    $("#menu").css("top", (top_position-86) + "px");
  } else {
    // Reset the position to default.
    $("#menu").css("top", "48px");
  }
});

第 5 行在檢查,如果捲軸捲到 144px 或更下面的位置時(距離視窗頂端 144px)
就去修改 ID 為 menu 的元件,把 top 屬性的 px 值依照目前捲軸的位置做調整,以讓這個元件一直跟著捲軸跑。
而當捲軸回到比較上面的位置時,為了避免元件跑過頭,在第 8 行開始就設定讓捲軸回到初始位置。

參考資料:
1、[jQ]用 jQuery 控制網頁捲軸移動

沒有留言: