此代碼片段向網(wǎng)頁(yè)添加閱讀進(jìn)度條。 該欄直觀地表示用戶(hù)在主要內(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)有代碼可以在用戶(hù)滾動(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. 創(chuàng)建進(jìn)度條：它會(huì)動(dòng)態(tài)創(chuàng)建一個(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', ...)在用戶(hù)滾動(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)記住在您的項(xiàng)目中包含 jQuery 才能使此代碼正常工作。 修改后的代碼提供了更強(qiáng)大、更準(zhǔn)確的閱讀進(jìn)度條。 進(jìn)一步的改進(jìn)可能包括處理邊緣情況和添加更復(fù)雜的樣式。

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