如何在网格中制作粘性导航

Question

I am using a grid for the first time and want to make nav-bar sticky. I used:

position: sticky; top: 0; 

but nothing happened. Next:

position: fixed; 

but then everything spoiled

I want to have nav-bar in the same position when the page is scrolling. I tried event jquery but the result was the same.

 * { margin: 0; padding: 0; font-family: 'Andika New Basic', sans-serif; box-sizing: border-box; } body { background-color: #dedede; }.grid-container { display: grid; grid-template-areas: 'menu header' 'menu portfolio' 'menu about' 'menu contact' 'menu footer'; width: 80%; margin: 0 auto; grid-template-columns: 300px 1fr; grid-template-rows: 160px auto auto auto 100px; grid-gap: 20px; } /* Nagłówek i filtr */.header { grid-area: header; border-bottom: 5px solid #cecece; padding: 10px 0; }.header h1 { font-size: 40px; text-align: left; font-weight: bold; } /* Filtr */.header ul { font-size: 15px; text-align: left; margin-top: 30px; }.header ul li { display: inline-block; list-style-type: none; padding: 5px 10px; user-select: none; }.header i { margin-right: 5px; }.header span { margin-right: 10px; } /* hover do filtra */.header ul li:hover:not(:first-child) { cursor: pointer; color: #000; background-color: #cecece; }.active { color: #fff; background-color: #000; }.header ul:first-of-type('li') { color: red; } /* Koniec nagłówka i filtra */ /* Boczne menu z profileheader */.nav-bar { grid-area: menu; background-color: #fff; } /* zdjęcie profilowe */ #profile-picture { height: 100%; width: 100px; height: 100px; margin: 20px 20px 30px 20px; } #profile-picture img { object-fit: cover; border-radius: 4px; }.nav-bar h2 { font-size: 25px; margin-left: 20px; } /* Boczne menu */.nav-bar ul { list-style-type: none; font-size: 20px; margin-top: 15px; user-select: none; }.nav-bar ul a { text-decoration: none; color: #000; display: block; padding: 10px 20px; }.nav-bar ul ai { margin-right: 10px; }.nav-bar ul a:hover { background-color: #cecece; } #social-media { margin: 10px 0 20px 20px; font-size: 20px; } #social-media a { text-decoration: none; color: #000; } #social-media a:hover { opacity: 0.5; }.nav-bar /* koniec nawigacji */.main { grid-area: portfolio; }.main { display: grid; grid-template-areas: 'project project project' 'project project project' 'project-footer project-footer project-footer'; width: 100%; margin: 0 auto; grid-gap: 20px; grid-template-rows: 400px 400px; border-bottom: 3px solid #cecece; }.image-container { height: 250px; background-image: url('file:///C:/Users/Dell/Desktop/Portfolio/img/avatar.jpg'); background-size: cover; margin-bottom: 10px; }.project-footer { margin: 0 auto; grid-area: 'project-footer'; grid-column: 1 / 4; margin-bottom: 30px; }.image-button { display: inline-block; width: 40px; text-align: center; padding: 10px; font-size: 12px; }.image-button:hover { background-color: #000; color: #fff; cursor: pointer; }.project-footer.active:hover { color: #000; background-color: #cecece; }.about { grid-area: about; }.about { display: grid; grid-template-areas: 'about about' 'about about' 'about-me about-me'; width: 100%; margin: 0 auto; grid-gap: 20px; }.about-image { background-image: url('file:///C:/Users/Dell/Desktop/Portfolio/img/avatar.jpg'); background-size: cover; margin-bottom: 10px; height: 400px; }.about-me { grid-area: 'about-me'; grid-column: 1 / 3; margin-bottom: 20px; padding: 10px; }.skills { margin: auto; text-align: center; }.skills ul { list-style-type: none; padding: 20px; }.skills ul h4 { font-size: 20px; }.skills ul li { margin-bottom: 10px; }.about-me p { margin-bottom: 50px; }.about-me a { text-decoration: none; color: #000; padding: 15px; background-color: #cecece; }.about-me a:hover { background-color: #bebebe; }.about-me ai { margin-right: 10px; }.contact { grid-area: contact; background-color: #bebebe; padding: 15px; width: 100%; display: grid; grid-template-areas: 'contact-header contact-header contact-header' 'contact-button contact-button contact-button' 'contact-hr contact-hr contact-hr' 'contact-main contact-main contact-main'; width: 100%; margin: 0 auto; grid-template-columns: 33%; grid-gap: 20px 0px; }.contact h3 { grid-area: contact-header; grid-column: 1 / 4; margin-bottom: 10px; }.contact a { background-color: #333; color: #fefefe; text-decoration: none; font-size: 15px; text-align: center; padding: 15px; }.contact:nth-child(5) a:nth-child(3) { background-color: rgb(34, 151, 87); }.contact ai { display: block; font-size: 30px; margin-bottom: 5px; }.contact hr { grid-area: contact-hr; grid-column: 1/4; color: #fefefe; background-color: #fefefe; height: 1px; border: none; margin-top: 20px; }.contact form { grid-area: contact-main; grid-column: 1/4; }.contact input, .contact textarea { width: 100%; margin-bottom: 10px; border: none; outline: none; resize: none; padding: 10px; }.contact button { border: none; background-color: #000; color: #fff; padding: 10px 20px; font-size: 14px; }.contact button:hover { cursor: pointer; background-color: #dedede; color: #000; }.contact button i { margin-right: 10px; }.footer { grid-area: footer; text-align: center; background-color: #333; color: #cecece; padding: 20px; }.footer a { color: #cecece; } /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) {.example { background: red; } } /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) {.example { background: green; } } /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) {.example { background: blue; } } /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) {.grid-container { margin: 0; width: 99%; } } /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) {.example { background: pink; } }

 <div class="grid-container"> <div class="header"> <header> <h1>My Portfolio</h1> </header> <ul> <span>Filter:</span> <li class="active">ALL</li> <li><i class="fab fa-sketch"></i> Design</li> <li><i class="far fa-image"></i>Graphics</li> <li><i class="fas fa-paint-brush"></i>Art</li> </ul> </div> <div class="nav-bar"> <div id="profile-picture"> <img src="img/avatar.jpg" alt="Profile Image" width="100%" height="100%"> </div> <h2>Portfolio</h2> <nav> <ul> <li><a href="#"><i class="fas fa-th-large"></i>Portfolio</a></li> <li><a href="#"><i class="fas fa-user"></i>About</a></li> <li><a href="#"><i class="fas fa-envelope"></i>Contact</a></li> <li><a href="#"><i class="fas fa-briefcase"></i>CV</a></li> </ul> </nav> <div id="social-media"> <a href="#"><i class="fab fa-facebook-square"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-pinterest-p"></i></a> </div> </div> <div class="main"> <div class="project"> <div class="image-container"></div> <h3>Lorem Ipsum</h3> <p> Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. </p> </div> <div class="project"> <div class="image-container"></div> <h3>Lorem Ipsum</h3> <p> Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. </p> </div> <div class="project"> <div class="image-container"></div> <h3>Lorem Ipsum</h3> <p> Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. </p> </div> <div class="project"> <div class="image-container"></div> <h3>Lorem Ipsum</h3> <p> Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. </p> </div> <div class="project"> <div class="image-container"></div> <h3>Lorem Ipsum</h3> <p> Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. </p> </div> <div class="project"> <div class="image-container"></div> <h3>Lorem Ipsum</h3> <p> Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. </p> </div> <div class="project-footer"> <div class="image-button">&#8810</div> <div class="image-button active">1</div> <div class="image-button">2</div> <div class="image-button">3</div> <div class="image-button">4</div> <div class="image-button">&#8811</div> </div> </div> <div class="about"> <div class="about-image"></div> <div class="skills"> <ul> <li> <h3>Web Design Skills</h3> </li> <li>HTML</li> <li>CSS</li> <li>JavaScript - beginner</li> </ul> <ul> <li> <h3>Skills/Knowledge</h3> </li> <li>Java - beginner</li> <li>Photoshop - beginner</li> <li>English - B2/C1</li> </ul> </div> <div class="skills"> <ul> <li> <h3>Experience</h3> </li> <li>ADAPT SYSTEM - internship</li> <li>RADIO PARK FM - internship</li> <li>Graphic/Web Design studies</li> </ul> <ul> <li> <h3>Certificates</h3> </li> <li>CISCO</li> <li>IT Technician</li> <li>Udemy Courses</li> </ul> </div> <div class="about-image"></div> <div class="about-me"> <h4>About Me</h4> <p>Just me, myself and I, exploring the universe of unknownment. I have a heart of love and an interest of lorem ipsum and mauris neque quam blog. I want to share my world with you. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla. Praesent tincidunt sed tellus ut rutrum. Sed vitae justo condimentum, porta lectus vitae, ultricies congue gravida diam non fringilla.</p> <a href="#"><i class="fas fa-download"></i>Download Resume</a> <a href="#"><i class="fas fa-eye"></i>Watch CV</a> </div> </div> <div class="contact"> <h3>Contact Me</h3> <a href="mailto: kuba.bujak0@wp.pl"> <i class="fas fa-envelope"></i> kuba.bujak0@wp.pl </a> <a href="#"> <i class="fas fa-map-marker-alt"></i> Wroc&#322;aw, PL </a> <a href="tel: 511 179 660"> <i class="fas fa-phone-alt"></i> 511 179 660 </a> <hr> <form> <label for="name">Name</label><br> <input type="text" id="name" placeholder="Jakub Bujak"><br> <label for="email">Email</label><br> <input type="email" id="email" placeholder="kuba.bujak0@wp.pl"><br> <label for="message">Message</label><br> <textarea id="message" rows="4" cols="50" placeholder="Some text..."></textarea> <button><i class="fab fa-telegram-plane"></i> Send Message</button> </form> </div> <;--<div class="contact"> <h3>Contact Me</h3> </div>--> <div class="footer"> Wszelkie prawa zastrzeżone &copy. 2021 <a href="index:html">Portfolio</a><br> Projekt i wykonanie: <a href="https.//www.facebook.com/kuba.bujak.182/" target="_blank">Jakub Bujak</a> </div> </div>

Answer 1

Ok I hope this is what you want:

1st: I added a wrapper for the part of your navbar that should stick to the top. This is only the actual navbar not the profile image. For that I added the line (see comment reference within HTML: line 18): <div class="nav-sticky">

2nd: I closed the wrapper by adding this line at the end of the nav-bar (see HTML comment reference: line 33): </div>

3rd: I added a css line for the wrapper to be sticky: .nav-sticky { position: sticky; top: 0; } .nav-sticky { position: sticky; top: 0; } .nav-sticky { position: sticky; top: 0; } (CSS-line: 355 - 360).

Now the Navbar will scroll until it reaches the top of the screen and remain there. If you want the profile image to stick to the top too, you just need to move the opening tag of the wrapper above the image tag to have it included within the wrapper.

 * { margin: 0; padding: 0; font-family: 'Andika New Basic', sans-serif; box-sizing: border-box; } body { background-color: #dedede; }.grid-container { display: grid; grid-template-areas: 'menu header' 'menu portfolio' 'menu about' 'menu contact' 'menu footer'; width: 80%; margin: 0 auto; grid-template-columns: 300px 1fr; grid-template-rows: 160px auto auto auto 100px; grid-gap: 20px; } /* Nagłówek i filtr */.header { grid-area: header; border-bottom: 5px solid #cecece; padding: 10px 0; }.header h1 { font-size: 40px; text-align: left; font-weight: bold; } /* Filtr */.header ul { font-size: 15px; text-align: left; margin-top: 30px; }.header ul li { display: inline-block; list-style-type: none; padding: 5px 10px; user-select: none; }.header i { margin-right: 5px; }.header span { margin-right: 10px; } /* hover do filtra */.header ul li:hover:not(:first-child) { cursor: pointer; color: #000; background-color: #cecece; }.active { color: #fff; background-color: #000; }.header ul:first-of-type('li') { color: red; } /* Koniec nagłówka i filtra */ /* Boczne menu z profileheader */.nav-bar { grid-area: menu; background-color: #fff; } /* zdjęcie profilowe */ #profile-picture { height: 100%; width: 100px; height: 100px; margin: 20px 20px 30px 20px; } #profile-picture img { object-fit: cover; border-radius: 4px; }.nav-bar h2 { font-size: 25px; margin-left: 20px; } /* Boczne menu */.nav-bar ul { list-style-type: none; font-size: 20px; margin-top: 15px; user-select: none; }.nav-bar ul a { text-decoration: none; color: #000; display: block; padding: 10px 20px; }.nav-bar ul ai { margin-right: 10px; }.nav-bar ul a:hover { background-color: #cecece; } #social-media { margin: 10px 0 20px 20px; font-size: 20px; } #social-media a { text-decoration: none; color: #000; } #social-media a:hover { opacity: 0.5; }.nav-bar /* koniec nawigacji */.main { grid-area: portfolio; }.main { display: grid; grid-template-areas: 'project project project' 'project project project' 'project-footer project-footer project-footer'; width: 100%; margin: 0 auto; grid-gap: 20px; grid-template-rows: 400px 400px; border-bottom: 3px solid #cecece; }.image-container { height: 250px; background-image: url('file:///C:/Users/Dell/Desktop/Portfolio/img/avatar.jpg'); background-size: cover; margin-bottom: 10px; }.project-footer { margin: 0 auto; grid-area: 'project-footer'; grid-column: 1 / 4; margin-bottom: 30px; }.image-button { display: inline-block; width: 40px; text-align: center; padding: 10px; font-size: 12px; }.image-button:hover { background-color: #000; color: #fff; cursor: pointer; }.project-footer.active:hover { color: #000; background-color: #cecece; }.about { grid-area: about; }.about { display: grid; grid-template-areas: 'about about' 'about about' 'about-me about-me'; width: 100%; margin: 0 auto; grid-gap: 20px; }.about-image { background-image: url('file:///C:/Users/Dell/Desktop/Portfolio/img/avatar.jpg'); background-size: cover; margin-bottom: 10px; height: 400px; }.about-me { grid-area: 'about-me'; grid-column: 1 / 3; margin-bottom: 20px; padding: 10px; }.skills { margin: auto; text-align: center; }.skills ul { list-style-type: none; padding: 20px; }.skills ul h4 { font-size: 20px; }.skills ul li { margin-bottom: 10px; }.about-me p { margin-bottom: 50px; }.about-me a { text-decoration: none; color: #000; padding: 15px; background-color: #cecece; }.about-me a:hover { background-color: #bebebe; }.about-me ai { margin-right: 10px; }.contact { grid-area: contact; background-color: #bebebe; padding: 15px; width: 100%; display: grid; grid-template-areas: 'contact-header contact-header contact-header' 'contact-button contact-button contact-button' 'contact-hr contact-hr contact-hr' 'contact-main contact-main contact-main'; width: 100%; margin: 0 auto; grid-template-columns: 33%; grid-gap: 20px 0px; }.contact h3 { grid-area: contact-header; grid-column: 1 / 4; margin-bottom: 10px; }.contact a { background-color: #333; color: #fefefe; text-decoration: none; font-size: 15px; text-align: center; padding: 15px; }.contact:nth-child(5) a:nth-child(3) { background-color: rgb(34, 151, 87); }.contact ai { display: block; font-size: 30px; margin-bottom: 5px; }.contact hr { grid-area: contact-hr; grid-column: 1/4; color: #fefefe; background-color: #fefefe; height: 1px; border: none; margin-top: 20px; }.contact form { grid-area: contact-main; grid-column: 1/4; }.contact input, .contact textarea { width: 100%; margin-bottom: 10px; border: none; outline: none; resize: none; padding: 10px; }.contact button { border: none; background-color: #000; color: #fff; padding: 10px 20px; font-size: 14px; }.contact button:hover { cursor: pointer; background-color: #dedede; color: #000; }.contact button i { margin-right: 10px; }.footer { grid-area: footer; text-align: center; background-color: #333; color: #cecece; padding: 20px; }.footer a { color: #cecece; } /* Adding css for the sticky wrapper */.nav-sticky { position: sticky; top: 0; } /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) {.example { background: red; } } /* Small devices (portrait tablets and large phones, 600px and up) */ @media only screen and (min-width: 600px) {.example { background: green; } } /* Medium devices (landscape tablets, 768px and up) */ @media only screen and (min-width: 768px) {.example { background: blue; } } /* Large devices (laptops/desktops, 992px and up) */ @media only screen and (min-width: 992px) {.grid-container { margin: 0; width: 99%; } } /* Extra large devices (large laptops and desktops, 1200px and up) */ @media only screen and (min-width: 1200px) {.example { background: pink; } }

 <div class="grid-container"> <div class="header"> <header> <h1>My Portfolio</h1> </header> <ul> <span>Filter:</span> <li class="active">ALL</li> <li><i class="fab fa-sketch"></i> Design</li> <li><i class="far fa-image"></i>Graphics</li> <li><i class="fas fa-paint-brush"></i>Art</li> </ul> </div> <div class="nav-bar"> <div id="profile-picture"> <img src="img/avatar.jpg" alt="Profile Image" width="100%" height="100%"> </div> <div class="nav-sticky"> <:-- Added: Wrapper open --> <h2>Portfolio</h2> <nav> <ul> <li><a href="#"><i class="fas fa-th-large"></i>Portfolio</a></li> <li><a href="#"><i class="fas fa-user"></i>About</a></li> <li><a href="#"><i class="fas fa-envelope"></i>Contact</a></li> <li><a href="#"><i class="fas fa-briefcase"></i>CV</a></li> </ul> </nav> <div id="social-media"> <a href="#"><i class="fab fa-facebook-square"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> <a href="#"><i class="fab fa-pinterest-p"></i></a> </div> </div> <.-- Added, Sticky Wrapper close --> </div> <div class="main"> <div class="project"> <div class="image-container"></div> <h3>Lorem Ipsum</h3> <p> Praesent tincidunt sed tellus ut rutrum, Sed vitae justo condimentum. porta lectus vitae. ultricies congue gravida diam non fringilla, </p> </div> <div class="project"> <div class="image-container"></div> <h3>Lorem Ipsum</h3> <p> Praesent tincidunt sed tellus ut rutrum, Sed vitae justo condimentum. porta lectus vitae. ultricies congue gravida diam non fringilla, </p> </div> <div class="project"> <div class="image-container"></div> <h3>Lorem Ipsum</h3> <p> Praesent tincidunt sed tellus ut rutrum, Sed vitae justo condimentum. porta lectus vitae. ultricies congue gravida diam non fringilla, </p> </div> <div class="project"> <div class="image-container"></div> <h3>Lorem Ipsum</h3> <p> Praesent tincidunt sed tellus ut rutrum, Sed vitae justo condimentum. porta lectus vitae. ultricies congue gravida diam non fringilla, </p> </div> <div class="project"> <div class="image-container"></div> <h3>Lorem Ipsum</h3> <p> Praesent tincidunt sed tellus ut rutrum, Sed vitae justo condimentum. porta lectus vitae. ultricies congue gravida diam non fringilla, </p> </div> <div class="project"> <div class="image-container"></div> <h3>Lorem Ipsum</h3> <p> Praesent tincidunt sed tellus ut rutrum, Sed vitae justo condimentum. porta lectus vitae, ultricies congue gravida diam non fringilla, </p> </div> <div class="project-footer"> <div class="image-button">&#8810</div> <div class="image-button active">1</div> <div class="image-button">2</div> <div class="image-button">3</div> <div class="image-button">4</div> <div class="image-button">&#8811</div> </div> </div> <div class="about"> <div class="about-image"></div> <div class="skills"> <ul> <li> <h3>Web Design Skills</h3> </li> <li>HTML</li> <li>CSS</li> <li>JavaScript - beginner</li> </ul> <ul> <li> <h3>Skills/Knowledge</h3> </li> <li>Java - beginner</li> <li>Photoshop - beginner</li> <li>English - B2/C1</li> </ul> </div> <div class="skills"> <ul> <li> <h3>Experience</h3> </li> <li>ADAPT SYSTEM - internship</li> <li>RADIO PARK FM - internship</li> <li>Graphic/Web Design studies</li> </ul> <ul> <li> <h3>Certificates</h3> </li> <li>CISCO</li> <li>IT Technician</li> <li>Udemy Courses</li> </ul> </div> <div class="about-image"></div> <div class="about-me"> <h4>About Me</h4> <p>Just me. myself and I. exploring the universe of unknownment. I have a heart of love and an interest of lorem ipsum and mauris neque quam blog. I want to share my world with you, Praesent tincidunt sed tellus ut rutrum, Sed vitae justo condimentum. porta lectus vitae. ultricies congue gravida diam non fringilla, Praesent tincidunt sed tellus ut rutrum, Sed vitae justo condimentum. porta lectus vitae: ultricies congue gravida diam non fringilla.</p> <a href="#"><i class="fas fa-download"></i>Download Resume</a> <a href="#"><i class="fas fa-eye"></i>Watch CV</a> </div> </div> <div class="contact"> <h3>Contact Me</h3> <a href="mailto. kuba.bujak0@wp.pl"> <i class="fas fa-envelope"></i> kuba;bujak0@wp,pl </a> <a href="#"> <i class="fas fa-map-marker-alt"></i> Wroc&#322:aw. PL </a> <a href="tel. 511 179 660"> <i class="fas fa-phone-alt"></i> 511 179 660 </a> <hr> <form> <label for="name">Name</label><br> <input type="text" id="name" placeholder="Jakub Bujak"><br> <label for="email">Email</label><br> <input type="email" id="email" placeholder="kuba.bujak0@wp.pl"><br> <label for="message">Message</label><br> <textarea id="message" rows="4" cols="50" placeholder="Some text.;."></textarea> <button><i class="fab fa-telegram-plane"></i> Send Message</button> </form> </div> <:--<div class="contact"> <h3>Contact Me</h3> </div>--> <div class="footer"> Wszelkie prawa zastrzeżone &copy: 2021 <a href="index.html">Portfolio</a><br> Projekt i wykonanie. <a href="https.//www.facebook.com/kuba.bujak.182/" target="_blank">Jakub Bujak</a> </div> </div>