即使在向上滚动并与 header 混合后，粘性导航栏仍保持在 "top: 0"

Question

我是 HTML 编程新手。我正在制作一个具有粘性导航栏功能和圆形加载器的网站。没有加载器的粘性导航栏工作正常但添加了加载器代码，弄乱了 header.

var loader;

function loaderFunction() {
  loader = setTimeout(showPage, 1000)
}

function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("main").style.display = "block";
}


window.onscroll = function() {
  myFunction()
};

var navbar = document.getElementById("navbar");
const sticky = navbar.offsetTop;

function myFunction() {
  if (window.pageYOffset >= 55) {
    document.getElementById("navbar").style.position = "fixed"
    document.getElementById("navbar").style.top = "0"
  }
  if (window.pageYOffset < 55) {
    document.getElementById("navbar").style.position = "absolute"
    document.getElementById("navbar").style.top = "55"
  }
}

body {
  margin: 0px;
  padding: 0px;
  background-color: slategrey;
}


/* Body style from upper most elment to lower most element.*/

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -50px 0 0 -50px;
  border: 16px solid white;
  border-radius: 100%;
  border-top: 16px solid rgb(52, 185, 238);
  width: 50px;
  height: 50px;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#main {
  display: none;
  margin: 0;
  padding: 0;
}

header {
  background-color: snow;
  padding: 0.5vw;
}

#header {
  color: #45d68e;
  font-size: 5vw;
  font-family: sans-serif;
  text-decoration: none;
}

#hdr {
  color: rgb(48, 48, 48);
}

#hdr:hover {
  color: #45d68e;
}

#navbar {
  overflow: hidden;
  background-color: #333;
  position: absolute;
  padding: 1.5;
  width: 100%;
  box-shadow: 0 4px 8px 0 #00000033;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 1.5vw;
  text-decoration: none;
  font-size: 1.5vw;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

<body onload="loaderFunction()">

  <div id="loader"></div>

  <div id="main">
    <header>
      <a href="Project.html" id="header"><span id="hdr">Class</span>X-A</a>
    </header>

    <div id="navbar">
      <a href="Project.html">Home</a>
      <a href="#">News</a>
      <a href="#">Contact Us</a>
      <a href="#">About Us</a>
      <a href="#">Downloads</a>
    </div>

    <div>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
    </div>



  </div>


</body>

请查看输出并帮助我。请忽略 link css 命令。我在这里粘贴了 Css 代码。任何帮助都会很棒。谢谢。

Answer 1

无需将导航栏的位置属性从固定更改为绝对，只需将 navbar 位置保留为 sticky。不要忘记设置 top 属性.

#navbar {
 position: sticky;
 top: 0;
}

var loader;

function loaderFunction() {
  loader = setTimeout(showPage, 1000)
}

function showPage() {
  document.getElementById("loader").style.display = "none";
  document.getElementById("main").style.display = "block";
}

  // window.onscroll = function() {myFunction()};
  
  // var navbar = document.getElementById("navbar");
  // const sticky = navbar.offsetTop;
  
  // function myFunction() {
  //   if (window.pageYOffset >= 55) {
  //     document.getElementById("navbar").style.position = "fixed"
  //     document.getElementById("navbar").style.top = "0"
  //   } if (window.pageYOffset < 55) {
  //     document.getElementById("navbar").style.position = "absolute"
  //     document.getElementById("navbar").style.top = "55"
  //   }
  // }

body {
  margin: 0px;
  padding: 0px;
  background-color: slategrey;
}


/* Body style from upper most elment to lower most element.*/

#loader {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  width: 150px;
  height: 150px;
  margin: -50px 0 0 -50px;
  border: 16px solid white;
  border-radius: 100%;
  border-top: 16px solid rgb(52, 185, 238);
  width: 50px;
  height: 50px;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#main {
  display: none;
  margin: 0;
  padding: 0;
}

header {
  background-color: snow;
  padding: 0.5vw;
}

#header {
  color: #45d68e;
  font-size: 5vw;
  font-family: sans-serif;
  text-decoration: none;
}

#hdr {
  color: rgb(48, 48, 48);
}

#hdr:hover {
  color: #45d68e;
}

#navbar {
  overflow: hidden;
  position: sticky;
  top: 0;
  background-color: #333;
  padding: 1.5;
  width: 100%;
  box-shadow: 0 4px 8px 0 #00000033;
}

#navbar a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 1.5vw;
  text-decoration: none;
  font-size: 1.5vw;
}

#navbar a:hover {
  background-color: #ddd;
  color: black;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <title>Webpage</title>

</head>

<body onload="loaderFunction()">

  <div id="loader"></div>

  <div id="main">
    <header>
      <a href="Project.html" id="header"><span id="hdr">Class</span>X-A</a>
    </header>

    <div id="navbar">
      <a href="Project.html">Home</a>
      <a href="#">News</a>
      <a href="#">Contact Us</a>
      <a href="#">About Us</a>
      <a href="#">Downloads</a>
    </div>

    <div>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
      <p>This is content</p>
    </div>



  </div>


</body>

</html>

即使在向上滚动并与 header 混合后，粘性导航栏仍保持在 "top: 0"

Sticky navbar remains at "top: 0" even after scrolling up and mixes up with the header

html

javascript

css

navigationbar