Question

我正在努力制作一个具有导航栏的网站，该导航栏将浮动到屏幕顶部并在滚动时固定在顶部，或者创建导航栏，当您滚动到页面内容时将显示该导航栏。我目前正在使用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

如果绝对放置所有内容，则文档流中将没有任何剩余。

您应该在 class 上工作，以使自己的某些样式变好，以免重复。使用更多的类和更少的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>

Answer 2

首先：不需要发布您的完整代码，没有人会阅读所有内容。第二：如果我正确理解了您的问题，那么可以很容易地用JavaScript做到这一点，这是怎么做的；

window.onscroll = function() {
    if ((document.body.scrollTop > /* header.top in px */) || (document.documentElement.scrollTop > /*header.top in px */) {
    yourHeader.style.top="0";
    yourHeader.style.position="fixed";
} else {
    //make your header.style.top=before and position as before
};
};

如何制作显示在滚动条上的导航栏？

2 个答案: