javascript - 如何制作出现在滚动条上的导航栏？

Question

我正在努力制作一个具有导航栏的网站，该导航栏将 float 到屏幕顶部并在滚动时固定在顶部，或者创建一个导航栏，该导航栏将在您滚动到页面内容时出现。我目前正在使用 HTML 和 CSS，但我没有足够的 Javascript 或任何其他编程语言经验，无法自行解决这个问题。

HTML:

@import url('https://fonts.googleapis.com/css?family=Raleway');
* {
  margin: 0;
  padding: 0;
}

body {
  background-image: url('background.jpg');
}

a {
  text-decoration: none;
  color: inherit;
}

#stickyNavMenu {
  position: fixed;
  top: 0;
  left: 0;
  height: 15%;
  width: 100%;
  z-index: 1000000;
  background-color: rgb(0, 0, 0, 0.6);
  display: none;
}

#stickyNavMenu ul {
  display: flex;
  top: 6%;
  left: 5%;
  position: fixed;
}

#stickyNavMenu ul li {
  list-style: none;
  padding-right: 4vw;
  font-size: 20px;
  font-family: Raleway;
}

#stickyNavMenu ul li a {
  color: rgb(290, 290, 290, 0.99);
}

#stickyNavMenu.show {
  display: show;
}

#dot {
  z-index: 1;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 35vw;
  height: 35vw;
  background-color: rgb(244, 244, 244, 0.6);
  border-radius: 50%;
  box-shadow: 0 0 3vw;
}

#dotTopText {
  position: absolute;
  top: 50%;
  font-size: 2vw;
  left: 50%;
  transform: translate(-50%, -400%);
  font-family: fantasy;
  color: rgb(64, 34, 8);
  letter-spacing: 3px;
}

#dotTopLine {
  width: 80%;
  position: absolute;
  height: 0.5%;
  box-shadow: 0 0 0.5px rgb(64, 34, 8);
  ;
  background-color: rgb(64, 34, 8);
  left: 50%;
  top: 35%;
  transform: translate(-50%, -100%);
}

#dotMiddleText {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 3vw;
  font-family: sans-serif;
  font-weight: bold;
  text-align: center;
  color: rgb(64, 34, 8);
  letter-spacing: 1px;
}

#boxOne {
  width: 5vw;
  height: 0.3vw;
  background-color: rgb(84, 34, 8);
  position: absolute;
  top: 50%;
  z-index: 100;
  left: 15%;
  transform: translate(-50%, -50%);
  border-radius: 40%;
}

#boxTwo {
  width: 5vw;
  height: 0.3vw;
  background-color: rgb(84, 34, 8);
  position: absolute;
  top: 50%;
  z-index: 100;
  border-radius: 40%;
  left: 85%;
  transform: translate(-50%, -50%);
}

#dotBottomLine {
  width: 80%;
  position: absolute;
  height: 0.5%;
  box-shadow: 0 0 0.5px rgb(64, 34, 8);
  ;
  background-color: rgb(64, 34, 8);
  left: 50%;
  top: 64%;
  transform: translate(-50%, 400%);
}

#dotBottomText {
  position: absolute;
  left: 50%;
  top: 75%;
  font-size: 2.25vw;
  font-family: fantasy;
  letter-spacing: 3px;
  color: rgb(64, 34, 8);
  transform: translate(-50%, -50%);
}

#dotRing {
  width: 33vw;
  z-index: 2;
  height: 33vw;
  border: 0.25vw solid rgb(64, 34, 8);
  box-shadow: 0px 0px 1vw rgb(64, 34, 8);
  border-radius: 50%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.navContainer {
  position: absolute;
  background-color: rgb(0, 0, 0, 0.35);
  width: 98%;
  height: 12vw;
  top: 50%;
  left: 50%;
  z-index: 0;
  transform: translate(-50%, -50%);
  font-size: 2.5vw;
  display: flex;
  padding-left: 2vw;
  box-shadow: 0 0 5vw black;
  font-family: Raleway;
  text-shadow: 0 0 5px brown;
}

#navItemOne {
  cursor: pointer;
  position: absolute;
  left: 10%;
  color: rgb(244, 244, 244, 0.9);
  top: 50%;
  transform: translate(-50%, -50%);
}

#navItemTwo {
  cursor: pointer;
  position: absolute;
  left: 25%;
  color: rgb(244, 244, 244, 0.9);
  top: 50%;
  transform: translate(-50%, -50%);
}

#navItemThree {
  cursor: pointer;
  position: absolute;
  left: 74%;
  color: rgb(244, 244, 244, 0.9);
  top: 50%;
  transform: translate(-50%, -50%);
}

#navItemFour {
  cursor: pointer;
  position: absolute;
  left: 89%;
  color: rgb(244, 244, 244, 0.9);
  top: 50%;
  transform: translate(-50%, -50%);
}

#scrollArrow {
  width: 5vw;
  height: 2vw;
  background-image: url("arrow.png");
  background-size: cover;
  background-position: center;
  position: absolute;
  z-index: 100;
  left: 50%;
  top: 90%;
  transform: translate(-50%, 50%);
}

#pageContentBox {
  width: 100%;
  margin: 0;
  padding: 0;
  position: absolute;
  top: 180%;
  right: 0;
  left: 50%;
  z-index: 1;
  height: 130%;
  background-color: rgb(290, 290, 290, 0.99);
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10vw black;
  border-top-right-radius: 3%;
  border-top-left-radius: 3%;
}

#contentText {
  text-indent: 3vw;
  color: rgb(64, 34, 8);
  letter-spacing: 0.5px;
  word-spacing: 0.5px;
  left: 3vw;
  right: 3vw;
  position: absolute;
  top: 5vw
}

#contentText #title {
  margin-bottom: 3vw;
  text-align: center;
  border-bottom: 1px solid rgb(64, 34, 8);
  padding-bottom: 20px;
  width: 50%;
  margin: 0 auto 3vw auto;
}

#contentText p {
  width: 75%;
  margin: 0 auto;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Why not</title>
  <link rel="stylesheet" href="style.css">

  <style>
    @import url('https://fonts.googleapis.com/css?family=Raleway');
    * {
      margin: 0;
      padding: 0;
    }
    
    body {
      background-image: url('background.jpg');
    }
    
    a {
      text-decoration: none;
      color: inherit;
    }
    
    #stickyNavMenu {
      position: fixed;
      top: 0;
      left: 0;
      height: 15%;
      width: 100%;
      z-index: 1000000;
      background-color: rgb(0, 0, 0, 0.6);
      display: none;
    }
    
    #stickyNavMenu ul {
      display: flex;
      top: 6%;
      left: 5%;
      position: fixed;
    }
    
    #stickyNavMenu ul li {
      list-style: none;
      padding-right: 4vw;
      font-size: 20px;
      font-family: Raleway;
    }
    
    #stickyNavMenu ul li a {
      color: rgb(290, 290, 290, 0.99);
    }
    
    #stickyNavMenu.show {
      display: show;
    }
    
    #dot {
      z-index: 1;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 35vw;
      height: 35vw;
      background-color: rgb(244, 244, 244, 0.6);
      border-radius: 50%;
      box-shadow: 0 0 3vw;
    }
    
    #dotTopText {
      position: absolute;
      top: 50%;
      font-size: 2vw;
      left: 50%;
      transform: translate(-50%, -400%);
      font-family: fantasy;
      color: rgb(64, 34, 8);
      letter-spacing: 3px;
    }
    
    #dotTopLine {
      width: 80%;
      position: absolute;
      height: 0.5%;
      box-shadow: 0 0 0.5px rgb(64, 34, 8);
      ;
      background-color: rgb(64, 34, 8);
      left: 50%;
      top: 35%;
      transform: translate(-50%, -100%);
    }
    
    #dotMiddleText {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      font-size: 3vw;
      font-family: sans-serif;
      font-weight: bold;
      text-align: center;
      color: rgb(64, 34, 8);
      letter-spacing: 1px;
    }
    
    #boxOne {
      width: 5vw;
      height: 0.3vw;
      background-color: rgb(84, 34, 8);
      position: absolute;
      top: 50%;
      z-index: 100;
      left: 15%;
      transform: translate(-50%, -50%);
      border-radius: 40%;
    }
    
    #boxTwo {
      width: 5vw;
      height: 0.3vw;
      background-color: rgb(84, 34, 8);
      position: absolute;
      top: 50%;
      z-index: 100;
      border-radius: 40%;
      left: 85%;
      transform: translate(-50%, -50%);
    }
    
    #dotBottomLine {
      width: 80%;
      position: absolute;
      height: 0.5%;
      box-shadow: 0 0 0.5px rgb(64, 34, 8);
      ;
      background-color: rgb(64, 34, 8);
      left: 50%;
      top: 64%;
      transform: translate(-50%, 400%);
    }
    
    #dotBottomText {
      position: absolute;
      left: 50%;
      top: 75%;
      font-size: 2.25vw;
      font-family: fantasy;
      letter-spacing: 3px;
      color: rgb(64, 34, 8);
      transform: translate(-50%, -50%);
    }
    
    #dotRing {
      width: 33vw;
      z-index: 2;
      height: 33vw;
      border: 0.25vw solid rgb(64, 34, 8);
      box-shadow: 0px 0px 1vw rgb(64, 34, 8);
      border-radius: 50%;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    
    .navContainer {
      position: absolute;
      background-color: rgb(0, 0, 0, 0.35);
      width: 98%;
      height: 12vw;
      top: 50%;
      left: 50%;
      z-index: 0;
      transform: translate(-50%, -50%);
      font-size: 2.5vw;
      display: flex;
      padding-left: 2vw;
      box-shadow: 0 0 5vw black;
      font-family: Raleway;
      text-shadow: 0 0 5px brown;
    }
    
    #navItemOne {
      cursor: pointer;
      position: absolute;
      left: 10%;
      color: rgb(244, 244, 244, 0.9);
      top: 50%;
      transform: translate(-50%, -50%);
    }
    
    #navItemTwo {
      cursor: pointer;
      position: absolute;
      left: 25%;
      color: rgb(244, 244, 244, 0.9);
      top: 50%;
      transform: translate(-50%, -50%);
    }
    
    #navItemThree {
      cursor: pointer;
      position: absolute;
      left: 74%;
      color: rgb(244, 244, 244, 0.9);
      top: 50%;
      transform: translate(-50%, -50%);
    }
    
    #navItemFour {
      cursor: pointer;
      position: absolute;
      left: 89%;
      color: rgb(244, 244, 244, 0.9);
      top: 50%;
      transform: translate(-50%, -50%);
    }
    
    #scrollArrow {
      width: 5vw;
      height: 2vw;
      background-image: url("arrow.png");
      background-size: cover;
      background-position: center;
      position: absolute;
      z-index: 100;
      left: 50%;
      top: 90%;
      transform: translate(-50%, 50%);
    }
    
    #pageContentBox {
      width: 100%;
      margin: 0;
      padding: 0;
      position: absolute;
      top: 180%;
      right: 0;
      left: 50%;
      z-index: 1;
      height: 130%;
      background-color: rgb(290, 290, 290, 0.99);
      transform: translate(-50%, -50%);
      box-shadow: 0 0 10vw black;
      border-top-right-radius: 3%;
      border-top-left-radius: 3%;
    }
    
    #contentText {
      text-indent: 3vw;
      color: rgb(64, 34, 8);
      letter-spacing: 0.5px;
      word-spacing: 0.5px;
      left: 3vw;
      right: 3vw;
      position: absolute;
      top: 5vw
    }
    
    #contentText #title {
      margin-bottom: 3vw;
      text-align: center;
      border-bottom: 1px solid rgb(64, 34, 8);
      padding-bottom: 20px;
      width: 50%;
      margin: 0 auto 3vw auto;
    }
    
    #contentText p {
      width: 75%;
      margin: 0 auto;
    }
  </style>

</head>

<body>


  <div id="stickyNavMenu">
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="con.html">Contact</a></li>
      <li><a href="abo.html">About</a></li>
      <li><a href="pro.html">Products</a></li>
    </ul>
  </div>


  <div id="dot">
    <div id="dotTopText">EST. 2018</div>
    <div id="dotTopLine"></div>
    <div id="boxOne"></div>
    <div id="dotMiddleText">Company Name</div>
    <div id="boxTwo"></div>
    <div id="dotBottomLine"></div>
    <div id="dotBottomText">Subscript</div>
  </div>
  <div id="dotRing"></div>

  <div class="navContainer">
    <div id="navItemOne"><a href="index.html">Home</a></div>
    <div id="navItemTwo"><a href="con.html">Contact</a></div>
    <div id="navItemThree"><a href="abo.html">About</a></div>
    <div id="navItemFour"><a href="pro.html">Products</a></div>
  </div>

  <div id="scrollArrow"></div>

  <div id="pageContentBox">
    <div id="contentText">
      <h1 id="title">Content Title</h1>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
      <br />
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
        It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
        desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
      </p>
    </div>
  </div>

</body>

</html>

这是我目前的代码。有什么建议或技巧可以创建我正在尝试做的事情吗？

哦，还有，内容背景不会一直延伸到页面下方。有什么办法可以解决这个问题吗？

谢谢!

Answer 1

还有一些需要注意的事情。

请阅读 CSS Positioning

如果您对所有内容进行绝对定位，那么您的文档流中将一无所有。

您应该在类里面确定您的一些风格，这样您就不必重蹈覆辙。使用更多类和更少 ID。

body {
  margin: 0;
}

a {
  text-decoration: none;
  color: inherit;
}

#stickyNavMenu {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.6);
}

#stickyNavMenu ul {
  display: flex;
  justify-content: center;
  padding: 0;
}

#stickyNavMenu ul li {
  list-style: none;
  padding: 0 4vw;
  font-size: 2.5vw;
}

#stickyNavMenu ul li a {
  color: rgba(290, 290, 290, 0.99);
}

#dot {
  color: rgb(64, 34, 8);
  text-align: center;
  z-index: 1;
  position: relative;
  margin: 20vw auto;
  width: 35vw;
  height: 35vw;
  background-color: rgba(244, 244, 244, 0.6);
  border-radius: 50%;
  box-shadow: 0 0 3vw;
}

.text-style-1 {
  position: relative;
  font-size: 2vw;
  letter-spacing: 3px;
}

.text-style-2 {
  position: relative;
  font-size: 3vw;
  letter-spacing: 1px;
  font-family: sans-serif;
  font-weight: bold;
}

#dotTopText {
  top: 5vw;
}

#dotMiddleText {
  top: 11.5vw;
  width: 50%;
  margin: 0 auto;
}

#dotBottomText {
  top: 18vw;
}

.line {
  box-shadow: 0 0 0.5px rgb(64, 34, 8);
  background-color: rgb(64, 34, 8);
  height: 1px;
}

.line--main {
  width: 80%;
  position: relative;
  margin: 0 auto;
}

#dotTopLine {
  top: 9.3vw;
}

#dotBottomLine {
  top: 14.6vw;
}

.line--minor {
  width: 5vw;
  top: 50%;
  position: absolute;
  border-radius: 40%;
}

#boxOne {
  left: 2vw;
}

#boxTwo {
  right: 2vw;
}

#dotRing {
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 2;
  height: 100%;
  border: 0.25vw solid rgb(64, 34, 8);
  box-shadow: 0px 0px 1vw rgb(64, 34, 8);
  border-radius: 50%;
}

.navContainer {
  background-color: rgba(0, 0, 0, 0.35);
  height: 12vw;
  z-index: 0;
  font-size: 2.5vw;
  display: flex;
  box-shadow: 0 0 5vw black;
  text-shadow: 0 0 5px brown;
  margin-top: -43.5vw;
  position: relative;
}

.navItem {
  cursor: pointer;
  position: absolute;
  top: 4.3vw;
  color: rgba(244, 244, 244, 0.9);
}

#navItemOne {
  left: 5vw;
}

#navItemTwo {
  left: 20vw;
}

#navItemThree {
  right: 20vw;
}

#navItemFour {
  right: 5vw;
}

#scrollArrow {
  margin: 15vw auto 0;
  width: 5vw;
  height: 2vw;
  background-image: url("arrow.png");
  background-size: cover;
  background-position: center;
}

#pageContentBox {
  background-color: rgba(290, 290, 290, 0.99);
  box-shadow: 0 0 10vw black;
  border-top-right-radius: 3%;
  border-top-left-radius: 3%;
  position: relative;
}

#contentText {
  text-indent: 3vw;
  color: rgb(64, 34, 8);
  letter-spacing: 0.5px;
  word-spacing: 0.5px;
  left: 3vw;
  right: 3vw;
  position: absolute;
  top: 5vw;
}

#contentText #title {
  margin-bottom: 3vw;
  text-align: center;
  border-bottom: 1px solid rgb(64, 34, 8);
  padding-bottom: 20px;
  width: 50%;
  margin: 0 auto 3vw auto;
}

#contentText p {
  width: 75%;
  margin: 0 auto;
}

<div id="stickyNavMenu">
  <ul>
    <li><a href="index.html">Home</a></li>
    <li><a href="con.html">Contact</a></li>
    <li><a href="abo.html">About</a></li>
    <li><a href="pro.html">Products</a></li>
  </ul>
</div>

<div id="dot">
  <div class="text-style-1" id="dotTopText">EST. 2018</div>
  <div class="line line--main" id="dotTopLine"></div>
  <div class="line line--minor" id="boxOne"></div>
  <div class="text-style-2" id="dotMiddleText">Company Name</div>
  <div class="line line--minor" id="boxTwo"></div>
  <div class="line line--main" id="dotBottomLine"></div>
  <div class="text-style-1" id="dotBottomText">Subscript</div>
  <div id="dotRing"></div>
</div>


<div class="navContainer">
  <div class="navItem" id="navItemOne"><a href="index.html">Home</a></div>
  <div class="navItem" id="navItemTwo"><a href="con.html">Contact</a></div>
  <div class="navItem" id="navItemThree"><a href="abo.html">About</a></div>
  <div class="navItem" id="navItemFour"><a href="pro.html">Products</a></div>
</div>

<div id="scrollArrow"></div>

<div id="pageContentBox">
  <div id="contentText">
    <h1 id="title">Content Title</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    <br />
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It
      has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
</div>