粘性导航栏未修复
[英]Sticky Navbar not fixed
问题描述
我遵循了 W3-Tutorial 并想要一个固定的导航栏。 不幸的是，JS 没有显示任何效果。 我已经尝试过更高的 z-index 和 position:sticky，但这也无济于事。
window.onscroll = function() {myFunction()}; var navbar = document.getElementById("navigation-bar"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } }
html, body { margin: 0; font-family: Arial, Helvetica, sans-serif; padding: 0; box-sizing: border-box; height: 100%; } * { margin: 0; padding: 0; box-sizing: border-box; }.nav { list-style-type: none; margin: 0; padding: 0; overflow: hidden; top: 0; height: 4.3vw; } li { float: left; width: 13vw; } li a { display: block; color: rgb(196, 195, 195); text-align: center; padding: 3vw; padding-top: 1.5vw; padding-bottom: 1.3vw; text-decoration: none; font-size: 1.2vw; }.logo { padding: 0; pointer-events: none; }.sticky { position: fixed; top: 0; width: 100%; }
<div class="nav" id="navigation-bar"> <ul> <li><a class="logo" href="#Home"><img src="Logo/logo.png" alt="Logo" width="30%"></a></li> <li><a class="active" href="#Home">Home</a></li> <li><a href="#Fotos">Fotos</a></li> <li><a href="#Über mich">Über mich</a></li> <li><a href="#Kontakt">Kontakt</a></li> </ul> </div>
当导航栏离开屏幕时，会在 div "nav" 中创建一个名为 sticky 的 class，并将其粘贴到页面顶部。
谢谢你的帮助！
2 个解决方案
解决方案1
0 2021-04-01 09:36:36
试试这个js：
window.onscroll = myFunction;
var navbar = document.getElementById("navigation-bar");
var sticky = navbar.offsetHeight;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
解决方案2
-1 已采纳 2021-04-01 09:36:12
这是您使用JS的navbar 。
window.onscroll = function() {myFunction()}; var navbar = document.getElementById("navigation"); var sticky = navbar.offsetTop; function myFunction() { if (window.pageYOffset >= sticky) { navbar.classList.add("sticky") } else { navbar.classList.remove("sticky"); } }
html, body { margin: 0; font-family: Arial, Helvetica, sans-serif; padding: 0; box-sizing: border-box; height: 100%; } * { margin: 0; padding: 0; box-sizing: border-box; }.nav { background-color:black; list-style-type: none; margin: 0; padding: 0; overflow: hidden; top: 0; height: 4.3vw; } li { float: left; width: 13vw; } li a { display: block; color: rgb(196, 195, 195); text-align: center; padding: 3vw; padding-top: 1.5vw; padding-bottom: 1.3vw; text-decoration: none; font-size: 1.2vw; }.logo { padding: 0; pointer-events: none; }.sticky { position: fixed; top: 0; width: 100%; }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1"> </head> <body> <div class="nav" id="navigation"> <ul> <li><a class="logo" href="#Home"><img src="Logo/logo.png" alt="Logo" width="30%"></a></li> <li><a class="active" href="#Home">Home</a></li> <li><a href="#Fotos">Fotos</a></li> <li><a href="#Über mich">Über mich</a></li> <li><a href="#Kontakt">Kontakt</a></li> </ul> </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> <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> <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> <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> </body> </html>
当 position 从固定切换到 static 时，不会出现反向粘性导航栏？
[英]Reverse sticky navbar not appearing when position switches from fixed to static?
在平板电脑/手机模式下，我的粘性/固定到顶部导航栏不再粘性
[英]My sticky/fixed-to-top navbar stops being sticky when in tablet/phone mode
如何在 jquery & bootstrap 5 中的主要固定顶部导航栏下的特定部分的滚动上添加第二个粘性导航栏？
[英]How to add a second sticky navbar on scroll of a particular section, under the primary fixed-top navbar, in jquery & bootstrap 5?
当我在底部编码时，为什么我的固定导航栏位于我的粘性导航栏之上？
[英]Why is my fixed navbar ontop of my sticky navbar when i coded it in the bottom?
我如何才能使粘性导航栏在其底部固定之前在英雄底部透明显示？
[英]How can i make a sticky navbar appear transparent at the bottom of a hero before it becomes fixed at the top?
固定导航栏以进行导航时，导航栏从导航栏下推
[英]nav links being pushed down from navigation bar when navbar is fixed for sticky navigation
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.