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

Question

I am working to make a website that has a navbar that will either float to the top of the screen and become fixed at the top when scrolling or creating a navbar that will appear once you scroll into the page content. I am currently using HTML and CSS but I don't have enough experience with Javascript or any other programming languages to be able to work this out on my own.

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> 

This is the current code I have. Any suggestions or tips to be able to create what I'm trying to do?

Oh, also, the content background won't span all the way down the page. Is there any way to fix this as well?

Thanks!

Answer 1

A couple of other things to note.

Please have a read of CSS Positioning

If you absolutely position everything, there will be nothing left in your document flow.

You should work at class ifying some of your styles so that you don't have to repeat yourself. Use more classes and less IDs.

 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

First of all: there's no need to post your whole code, no one will read everything . Second of all: if I understand your question correctly, this can easily be done with JavaScript, here is how;

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
};
};