閱讀進度條

此程式碼片段為網頁新增閱讀進度列。 此欄直觀地表示使用者在主要內容區域中的滾動進度。讓我們分解它的工作原理並改進它。

程式碼嘗試根據相對於 main 元素總高度的捲動位置來計算進度。 然而，它有幾個問題：

• 程式碼不完整：提供的程式碼已被截斷。 它缺少實際創建和更新視覺進度條的關鍵部分。 div 已創建，但不存在樣式或進度更新邏輯。
• 高度計算不正確：根據頁面結構，totalHeight的計算可能不準確。 使用 outerHeight(true) 包含邊距，這可能是不需要的。 它也沒有考慮到在初始計算後可能改變高度的動態內容。
• 缺乏進度更新：沒有程式碼可以在使用者捲動時更新進度條。 計算僅在文件準備好時進行一次。
• 頁腳高度問題：如果頁腳固定或與主要內容重疊，減去footerHeight可能會導致進度計算不正確。

這是解決這些問題的改進版本：

$(document).ready(function() {
  if ($('body').hasClass('single')) {
    const progressBar = $('<div id="reading-progress"></div>');
    $('header').after(progressBar);

    let totalHeight = $('main').height(); // Use height() for more accurate calculation
    let windowHeight = $(window).height();

    $(window).on('scroll', function() {
      let scrollTop = $(this).scrollTop();
      let progress = (scrollTop / (totalHeight - windowHeight)) * 100; // Adjust for window height
      progress = Math.min(progress, 100); // Cap progress at 100%
      $('#reading-progress').css('width', progress + '%');
    });
  }
});

改進後的程式碼：

1. 建立進度條：它會動態建立一個 ID 為 div 的 reading-progress 作為進度條。
2. 使用 height()： 它使用 height() 而不是 outerHeight(true) 來更準確地計算主要內容高度。
3. 處理滾動事件：它使用$(window).on('scroll', ...)在使用者滾動時不斷更新進度條的寬度。
4. 準確計算進度：進度計算考慮了可見視窗的高度，防止進度條超過 100%。
5. 新增 CSS（需要）： 您需要新增 CSS 來設定 #reading-progress div 的樣式。 例如：

#reading-progress {
  height: 5px; /* Adjust height as needed */
  background-color: #007bff; /* Adjust color as needed */
  position: fixed;
  top: 0;
  left: 0;
  width: 0; /* Initially 0% width */
  z-index: 1000; /* Ensure it's on top */
}

請記住在您的專案中包含 jQuery 才能使此程式碼正常運作。 修改後的程式碼提供了更強大、更準確的閱讀進度條。 進一步的改進可能包括處理邊緣情況和添加更複雜的樣式。

以上是閱讀進度條的詳細內容。更多資訊請關注PHP中文網其他相關文章！