阅读进度条

此代码片段向网页添加阅读进度条。 该栏直观地表示用户在主要内容区域中的滚动进度。让我们分解它的工作原理并改进它。

代码尝试根据相对于 main 元素总高度的滚动位置来计算进度。 然而，它有几个问题：

• 代码不完整：提供的代码已被截断。 它缺少实际创建和更新视觉进度条的关键部分。 div 已创建，但不存在样式或进度更新逻辑。
• 高度计算不正确：根据页面结构，totalHeight的计算可能不准确。 使用 outerHeight(true) 包含边距，这可能是不需要的。 它也没有考虑到在初始计算后可能改变高度的动态内容。
• 缺乏进度更新：没有代码可以在用户滚动时更新进度条。 计算仅在文档准备好时进行一次。
• 页脚高度问题：如果页脚固定或与主要内容重叠，减去footerHeight可能会导致进度计算不正确。

这是解决这些问题的改进版本：

<code class="language-javascript">$(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 + '%');
    });
  }
});</code>

改进后的代码：

1. 创建进度条：它会动态创建一个 ID 为 div 的 reading-progress 作为进度条。
2. 使用 height()： 它使用 height() 而不是 outerHeight(true) 来更准确地计算主要内容高度。
3. 处理滚动事件：它使用$(window).on('scroll', ...)在用户滚动时不断更新进度条的宽度。
4. 准确计算进度：进度计算考虑了可见窗口的高度，防止进度条超过 100%。
5. 添加 CSS（需要）： 您需要添加 CSS 来设置 #reading-progress div 的样式。 例如：

<code class="language-css">#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 */
}</code>

请记住在您的项目中包含 jQuery 才能使此代码正常工作。 修改后的代码提供了更强大、更准确的阅读进度条。 进一步的改进可能包括处理边缘情况和添加更复杂的样式。

以上是阅读进度条的详细内容。更多信息请关注PHP中文网其他相关文章！