如何制作粘性導航欄？
[英]How to make a sticky navbar?
問題描述
我正在嘗試編寫一些代碼來制作一個粘性導航欄，這樣當我向下滾動時 position 是固定的，但是它不起作用。 我想知道 CSS 是否是問題所在，因為大多數 HTML 和 javascript 不會真正影響它。 我已經在我的其他一些網站上嘗試過，它們可以工作，但在這個網站上似乎不起作用。
<div id="main-nav">
<nav>
<h2 id="logo" class="main-nav">Captain Max from ERA</h2>
<br>
<ul class="main-nav">
<li> <a href="#">Listings</a></li>
<li> <a href="#">Get in touch</a></li>
<li> <a href="#">Projects</a></li>
</ul>
</nav>
</div>
這個腳本在這里，我不確定這是否有什么問題。
<script>
var navbar = document.getElementById("main-nav");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
</script>
CSS 就在這里，好像我做了一個改變粘滯鍵盤工作方式的屬性。
.sticky {
position: fixed;
top: 0;
width: 100%
}
.sticky + .content {
padding-top: 60px;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: 'Raleway', sans-serif;
font-size: 20px;
font-weight: 300;
text-rendering: optimizeLegibility;
}
nav {
background-color: #7b8195;
color: #e9e6df;
overflow: hidden;
}
#logo {
font-family: 'Raleway', sans-serif;
font-size: 250%;
border-top: 10px;
padding-right: 150px;
padding-left: 10px;
padding-top: 10px;
}
nav li {
display:inline-block;
margin-left: 40px;
}
.main-nav {
float: left;
list-style: none;
margin-right: 60px;
border-bottom: 10px;
padding-bottom: 10px;
}
.main-nav li a {
float: right;
color: #e9e6df;
text-decoration: none;
font-size: 90%;
}
.main-nav li a:link,
.main-nav li a:visited{
padding-bottom: 8px;
color: #e9e6df;
text-decoration: none;
font-size: 90%;
border-bottom: 2px solid transparent;
transition: border-bottom 0.2s;
}
.main-nav li a:hover,
.main-nav li a:active{
border-bottom: 2px solid #e9e6df;
}
該網站的鏈接在這里
2 個解決方案
解決方案1
0 2020-04-26 09:04:10
一切都是正確的，但是您必須在下面添加一些 CSS 才能使其工作。
<style>
#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: lightblue;
color: black;
}
#navbar a.active {
background-color: blue;
color: white;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
</style>
完整代碼在這里：
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"); } }
#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: lightblue; color: black; } #navbar a.active { background-color: blue; color: white; }.sticky { position: fixed; top: 0; width: 100%; }
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> </head> <body> <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> </body>
解決方案2
0 已采納 2020-04-27 01:49:11
我在您的網站上看到的是您沒有正確關閉script 。 您錯過了一個closed }胸罩。
<script>
var navbar = document.getElementById("main-nav");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
如何僅使用 HTML 和 CSS（無 JS）制作“粘性”導航欄？
[英]How to make a “sticky” navbar using only HTML and CSS (without JS)?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.