javascript - 滚动时导航栏下的行

Question

在 React 或 JavaScript 中滚动时，如何在导航栏下画一条线。像这样： 在此处输入图像描述

标签： javascripthtmlcssreactjs

Answer 1

易于使用的滚动监听器和进度元素。

const progressDOM = document.querySelector("#progress");

window.addEventListener("scroll", () => {
  let scrollTop = window.scrollY;
  let docHeight = document.body.offsetHeight;
  let winHeight = window.innerHeight;
  let scrollPercent = scrollTop / (docHeight - winHeight);
  let scrollPercentRounded = Math.round(scrollPercent * 100);
  progressDOM.value = scrollPercentRounded;
});

#progress{

  position: fixed;
}

<progress id="progress" max="100" value="0"></progress>

<div style="height: 10000px;"></div>