此程式碼片段為網(wǎng)頁(yè)新增閱讀進(jìn)度列。 此欄直觀地表示使用者在主要內(nèi)容區(qū)域中的滾動(dòng)進(jìn)度。讓我們分解它的工作原理並改進(jìn)它。

程式碼嘗試根據(jù)相對(duì)於 main 元素總高度的捲動(dòng)位置來(lái)計(jì)算進(jìn)度。 然而，它有幾個(gè)問(wèn)題：

• 程式碼不完整：提供的程式碼已被截?cái)唷? 它缺少實(shí)際創(chuàng)建和更新視覺(jué)進(jìn)度條的關(guān)鍵部分。 div 已創(chuàng)建，但不存在樣式或進(jìn)度更新邏輯。
• 高度計(jì)算不正確：根據(jù)頁(yè)面結(jié)構(gòu)，totalHeight的計(jì)算可能不準(zhǔn)確。 使用 outerHeight(true) 包含邊距，這可能是不需要的。 它也沒(méi)有考慮到在初始計(jì)算後可能改變高度的動(dòng)態(tài)內(nèi)容。
• 缺乏進(jìn)度更新：沒(méi)有程式碼可以在使用者捲動(dòng)時(shí)更新進(jìn)度條。 計(jì)算僅在文件準(zhǔn)備好時(shí)進(jìn)行一次。
• 頁(yè)腳高度問(wèn)題：如果頁(yè)腳固定或與主要內(nèi)容重疊，減去footerHeight可能會(huì)導(dǎo)致進(jìn)度計(jì)算不正確。

這是解決這些問(wèn)題的改進(jìn)版本：

$(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 + '%');
    });
  }
});

改進(jìn)後的程式碼：

1. 建立進(jìn)度條：它會(huì)動(dòng)態(tài)建立一個(gè) ID 為 div 的 reading-progress 作為進(jìn)度條。
2. 使用 height()： 它使用 height() 而不是 outerHeight(true) 來(lái)更準(zhǔn)確地計(jì)算主要內(nèi)容高度。
3. 處理滾動(dòng)事件：它使用$(window).on('scroll', ...)在使用者滾動(dòng)時(shí)不斷更新進(jìn)度條的寬度。
4. 準(zhǔn)確計(jì)算進(jìn)度：進(jìn)度計(jì)算考慮了可見(jiàn)視窗的高度，防止進(jìn)度條超過(guò) 100%。
5. 新增 CSS（需要）： 您需要新增 CSS 來(lái)設(shè)定 #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 */
}

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

以上是閱讀進(jìn)度條的詳細(xì)內(nèi)容。更多資訊請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！