堆棧內存溢出
  簡體   English   中英

粘性/移動導航欄

[英]Sticky/Moving navigation bar

 原文  2021-03-22 12:05:23  5   2    javascript/ html/ css

問題描述

我一直在使用這個鏈接來創建一個導航欄。 我想要實現的目標有點不同，我正在努力讓它發揮作用。

我正在嘗試創建一個固定在頁面底部的導航欄，在滾動內容時，它會逐漸上升，到達頂部后它固定在那里，當您繼續滾動時，它會固定在頂部。

創建這種導航的最佳解決方案是什么？

謝謝你的幫助。 

 window.onscroll = function() {myFunction()}; var navbar = document.getElementById("navbar"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } }
 html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent} body{line-height:1;font-family:arial} h1{font-size:25px} h2{font-size:21px} h3{font-size:18px} h4{font-size:16px} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block} nav ul{list-style:none} blockquote,q{quotes:none} blockquote:before,blockquote:after,q:before,q:after{content:none} a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent} ins{background-color:#ff9;color:#000;text-decoration:none} mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold} del{text-decoration:line-through} abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help} table{border-collapse:collapse;border-spacing:0} hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0} input,select{vertical-align:middle} body,html{background-color:#FFF} nav{display:inline-block} nav ul li a{background:#fff;padding:2px 6px;font-size:14px;text-decoration:none;font-weight:bold;color:#344;border-radius:5px} nav ul li a:hover{color:#000} nav ul li{display:inline-block;margin:10px} nav ul{list-style:none} article{border-bottom:2px dotted #998;padding-bottom:20px;margin-bottom:20px} article h2{font-weight:normal;margin-bottom:12px} footer{background:#344;max-width:1000px;margin:0 -20px;clear:both;text-align:right} footer p{padding:20px;color:#FFF} address{padding:10px 20px 30px 10px} aside > div{margin:10px auto;background:#344;min-height:150px;padding:30px 10px;text-align:center;color:#FFF} a#logo{font-size:40px;color:#344;font-weight:bold;display:block;text-decoration:none;text-align:center;line-height:40px;padding:60px 5px} body > section{max-width:1000px;margin:auto;padding:30px 0px;border-bottom:1px solid #999;color:#333} #navbar {position: fixed;bottom: 0;width: 100%;overflow: hidden;background-color: rgb(255, 255, 255);} #navbar a {float: left;display: block;color: #000;text-align: center;padding: 14px 16px;text-decoration: none;font-size: 17px;background-color: #FFF;z-index: 1;} #navbar a:hover {background-color: #ddd;color: black;} #navbar a.active {background-color: #A9A9A9;color: white;}.content {padding: 16px;}.sticky {position: fixed;top: 0;width: 100%;}.sticky +.content { padding-bottom: 60px;} footer a{color:#FFF} #main{margin-left:320px} #wrapall{padding-top:60px} #page{padding:20px} #menuToggle,#mobileMenuToggle{background:#FFF;cursor:pointer;display:inline-block;font-size:40px;width:40px;font-weight:bold;text-align:center;height:40px;line-height:40px;color:#344;border-radius:10px} #mobileMenuToggle,#mobileLogo{vertical-align:middle;display:none;font-size:30px} #menuToggle:hover{color:#FFF;background:#344} @media screen and (max-width:1100px){header{padding:10px} #headerLeft{width:auto} #headerRight{width:60%}}
 <,doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <title></title> <link rel="stylesheet" href="style.css"> <script src="script.js"></script> </head> <body> <header> <div id="header"> <div id="navbar" > <a href="index.html">Home</a> <a href="about,html">About</a> </div> </div> </header> <div id="main"> <section id="page"> <main> <article> <h2>Illud mollis moderatius</h2> <p>Eum facete intellegat ei. ut mazim melius usu, Has elit simul primis ne. regione minimum id cum. Sea deleniti dissentiet ea, Illud mollis moderatius ut per. at qui ubique populo, Eum ad cibo legimus. vim ei quidam fastidii.</p> </article> <article> <h2>Ex ignota epicurei quo</h2> <p>Quo debet vivendo ex. Qui ut admodum senserit partiendo, Id adipiscing disputando eam. sea id magna pertinax concludaturque, Ex ignota epicurei quo, his ex doctus delenit fabellas. erat timeam cotidieque sit in, Vel eu soleat voluptatibus. cum cu exerci mediocritatem, Malis legere at per, has brute putant animal et. in consul utamur usu,</p> </article> <article> <h2>His at autem inani volutpat</h2> <p>Te has amet modo perfecto, te eum mucius conclusionemque. mel te erat deterruisset, Duo ceteros phaedrum id. ornatus postulant in sea. His at autem inani volutpat, Tollit possit in pri, platonem persecuti ad vix. vel nisl albucius gloriatur no,</p> </article> <article> <h2>Stet facilis ius te</h2> <p>Lorem ipsum dolor sit amet, nonumes voluptatum mel ea. cu case ceteros cum. Novum commodo malorum vix ut, Dolores consequuntur in ius. sale electram dissentiunt quo te, Cu duo omnes invidunt. eos eu mucius fabellas, Stet facilis ius te. quando voluptatibus eos in, Ad vix mundi alterum. integre urbanitas intellegam vix in,</p> </article> <article> <h2>Illud mollis moderatius</h2> <p>Eum facete intellegat ei. ut mazim melius usu, Has elit simul primis ne. regione minimum id cum. Sea deleniti dissentiet ea, Illud mollis moderatius ut per. at qui ubique populo, Eum ad cibo legimus. vim ei quidam fastidii,</p> </article> <article> <h2>Illud mollis moderatius</h2> <p>Eum facete intellegat ei. ut mazim melius usu, Has elit simul primis ne. regione minimum id cum. Sea deleniti dissentiet ea, Illud mollis moderatius ut per. at qui ubique populo, Eum ad cibo legimus. vim ei quidam fastidii.</p> </article> <article> <h2>Ex ignota epicurei quo</h2> <p>Quo debet vivendo ex. Qui ut admodum senserit partiendo, Id adipiscing disputando eam. sea id magna pertinax concludaturque, Ex ignota epicurei quo, his ex doctus delenit fabellas. erat timeam cotidieque sit in, Vel eu soleat voluptatibus. cum cu exerci mediocritatem, Malis legere at per, has brute putant animal et. in consul utamur usu,</p> </article> <article> <h2>Illud mollis moderatius</h2> <p>Eum facete intellegat ei. ut mazim melius usu, Has elit simul primis ne. regione minimum id cum. Sea deleniti dissentiet ea, Illud mollis moderatius ut per. at qui ubique populo, Eum ad cibo legimus. vim ei quidam fastidii,</p> </article> <article> <h2>His at autem inani volutpat</h2> <p>Te has amet modo perfecto, te eum mucius conclusionemque. mel te erat deterruisset, Duo ceteros phaedrum id. ornatus postulant in sea. His at autem inani volutpat, Tollit possit in pri, platonem persecuti ad vix. vel nisl albucius gloriatur no,</p> </article> <article> <h2>Stet facilis ius te</h2> <p>Lorem ipsum dolor sit amet, nonumes voluptatum mel ea. cu case ceteros cum. Novum commodo malorum vix ut, Dolores consequuntur in ius. sale electram dissentiunt quo te, Cu duo omnes invidunt. eos eu mucius fabellas, Stet facilis ius te. quando voluptatibus eos in, Ad vix mundi alterum. integre urbanitas intellegam vix in,</p> </article> <article> <h2>Illud mollis moderatius</h2> <p>Eum facete intellegat ei. ut mazim melius usu, Has elit simul primis ne. regione minimum id cum. Sea deleniti dissentiet ea, Illud mollis moderatius ut per. at qui ubique populo, Eum ad cibo legimus. vim ei quidam fastidii.</p> </article> <article> <h2>Ex ignota epicurei quo</h2> <p>Quo debet vivendo ex. Qui ut admodum senserit partiendo, Id adipiscing disputando eam. sea id magna pertinax concludaturque, Ex ignota epicurei quo, his ex doctus delenit fabellas. erat timeam cotidieque sit in, Vel eu soleat voluptatibus. cum cu exerci mediocritatem, Malis legere at per, has brute putant animal et. in consul utamur usu,</p> </article> <article> <h2>His at autem inani volutpat</h2> <p>Te has amet modo perfecto, te eum mucius conclusionemque. mel te erat deterruisset, Duo ceteros phaedrum id. ornatus postulant in sea. His at autem inani volutpat, Tollit possit in pri, platonem persecuti ad vix. vel nisl albucius gloriatur no,</p> </article> <article> <h2>Stet facilis ius te</h2> <p>Lorem ipsum dolor sit amet, nonumes voluptatum mel ea. cu case ceteros cum. Novum commodo malorum vix ut, Dolores consequuntur in ius. sale electram dissentiunt quo te, Cu duo omnes invidunt. eos eu mucius fabellas, Stet facilis ius te. quando voluptatibus eos in, Ad vix mundi alterum. integre urbanitas intellegam vix in,</p> </article> <article> <h2>Illud mollis moderatius</h2> <p>Eum facete intellegat ei. ut mazim melius usu, Has elit simul primis ne. regione minimum id cum. Sea deleniti dissentiet ea, Illud mollis moderatius ut per. at qui ubique populo, Eum ad cibo legimus. vim ei quidam fastidii.</p> </article> <article> <h2>Ex ignota epicurei quo</h2> <p>Quo debet vivendo ex. Qui ut admodum senserit partiendo, Id adipiscing disputando eam. sea id magna pertinax concludaturque, Ex ignota epicurei quo, his ex doctus delenit fabellas. erat timeam cotidieque sit in, Vel eu soleat voluptatibus. cum cu exerci mediocritatem, Malis legere at per, has brute putant animal et. in consul utamur usu,</p> </article> <article> <h2>His at autem inani volutpat</h2> <p>Te has amet modo perfecto, te eum mucius conclusionemque. mel te erat deterruisset, Duo ceteros phaedrum id. ornatus postulant in sea. His at autem inani volutpat, Tollit possit in pri, platonem persecuti ad vix. vel nisl albucius gloriatur no.</p> </article> </main> <footer> </footer> </section> </div> </div> </body> </html>

2 個解決方案

解決方案1
 0  2021-03-22 12:28:56

只需添加height:100vh; 在 header class 然后.header將采用全屏高度，而#navbar將在底部……或使用height:calc(100vh - 100px); 使 header 占據幾乎所有高度，將 100px 留給導航欄以在其中渲染

 window.onscroll = function() {myFunction()}; var navbar = document.getElementById("navbar"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } }
 body { margin: 0; font-size: 28px; font-family: Arial, Helvetica, sans-serif; }.header { background-color: #f1f1f1; padding: 30px; text-align: center; height:100vh; } #navbar { overflow: hidden; background-color: #333; } #navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } #navbar a:hover { background-color: #ddd; color: black; } #navbar a.active { background-color: #4CAF50; color: white; }.content { padding: 16px; }.sticky { position: fixed; top: 0; width: 100%; }.sticky +.content { padding-top: 60px; }
 <div class="header"> <h2>Scroll Down</h2> <p>Scroll down to see the sticky effect.</p> </div> <div id="navbar"> <a class="active" href="javascript:void(0)">Home</a> <a href="javascript:void(0)">News</a> <a href="javascript:void(0)">Contact</a> </div> <div class="content"> <h3>Sticky Navigation Example</h3> <p>The navbar will stick to the top when you reach its scroll position.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> <p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo. Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et. Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p> </div>

解決方案2
 0  2021-03-22 13:19:36

你可能不需要任何 javascript 來實現這一點，因為你有 position:sticky in css。

下面是一個既粘在底部又粘在頂部的導航示例：

<div class="container">
  <nav>My nav</nav>
  <div class="contents">
    Contents<br>
    Contents<br>
    Contents<br>
    Contents<br>
    Contents<br>
    Contents
  </div>
</div>

CSS：

body {
  --nav-height: 20px;
  margin: 0;
  font-family: sans-serif;
}

.container {
  overflow-y: scroll;
  border: 1px solid green;
  height: 100vh;
}
.contents {
  position: relative; /* remove to make contents go below navbar */
  top: -100vh; /* remove to make contents go below navbar */
  border: 1px solid orangered;
  height: 200vh; /* only to make contents block scrollable */
  line-height: 100px; /* only to make contents block scrollable */
  color: black;
}
nav {
  position:sticky; /* here is were the magic happens */
  top: 0;
  z-index: 1;
  background: red;
  color: white;
  width: 100vw;
  height: var(--nav-height);
  margin-top: calc(100vh - var(--nav-height)); /* ...and here */
}

https://codepen.io/nicolashervy/pen/xxgKpOM

那是你想要的樣子嗎？

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 縮小粘性導航欄 粘性導航欄 -React 粘性導航欄功能失調 粘性導航欄-不起作用 粘性導航欄 粘性導航欄功能 粘性導航欄<a>標簽</a> 響應式粘性漢堡導航欄 粘菜單（導航）欄是否跳躍？ 使用粘性導航欄滾動到div
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM