如何在網格中制作粘性導航

Question

我第一次使用網格並希望使導航欄具有粘性。 我用了：

position: sticky; top: 0; 

但什么也沒發生。 下一個：

position: fixed; 

但后來一切都被寵壞了

當頁面滾動時，我想在同一個 position 中有導航欄。 我嘗試了事件 jquery 但結果是一樣的。

 * { 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

好的，我希望這是您想要的：

第一個：我為導航欄應該粘在頂部的部分添加了一個包裝器。 這只是實際的導航欄而不是個人資料圖像。 為此，我添加了該行（請參閱 HTML 中的注釋參考：第 18 行）： <div class="nav-sticky">

第二：我通過在導航欄末尾添加這一行來關閉包裝器（參見 HTML 注釋參考：第 33 行）： </div>

第三：我添加了一條 css 行以使包裝器具有粘性： .nav-sticky { position: sticky; top: 0; } .nav-sticky { position: sticky; top: 0; } （CSS 行：355 - 360 .nav-sticky { position: sticky; top: 0; } 。

現在導航欄將滾動直到它到達屏幕頂部並保持在那里。 如果您希望配置文件圖像也貼在頂部，您只需將包裝器的開始標簽移動到圖像標簽上方，使其包含在包裝器中。

 * { 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>