滚动时导航栏下的行[关闭]答案

【问题标题】：Line under navbar when scrolling [closed]滚动时导航栏下的行[关闭]
【发布时间】：2021-06-25 04:17:14
【问题描述】：

如何在 React 或 JavaScript 中滚动时在导航栏下画一条线。像这样： enter image description here

【问题讨论】：

我建议使用它的许多现有实现之一，而不是自己构建；搜索“页面滚动进度”或“阅读进度指示器”

【解决方案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>

【讨论】：

如何在导航栏下做出反应

【解决方案2】：

在您的脚本文件中使用scroll 事件很容易

例子

window.addEventListener("scroll", function() {
   //Select your navigation bar
   var nav = document.getElementsByTagName("nav")[0];
   //Change 20 to anything you want like nav.offsetHeight
   if(window.scrollY > 20) {
       nav.style.borderBottom = "5px solid dodgerblue";
    } else {
      nav.style.border = "0";
   }
});

【讨论】：