在這個代碼片段中，我創建了一個功能強大的粘性導航，您可以在其中導航文章。但問題是導航來自文章而不是文章的頂部。什么是路，所以我可以在上面導航？
顯示代碼片段
* {
scroll-behavior: smooth;
}
nav {
position: sticky;
top: 0;
right: 0;
padding: 10x 0;
border: 1px solid red;
}
ul {
display: flex;
align-items: center;
gap: 30px;
}
li {
list-style: none
}
p {
margin-bottom: 300px;
}<nav>
<ul>
<li><a href="#introduce">introduce</a></li>
<li><a href="#history">history</a></li>
<li><a href="#maker">maker</a></li>
</ul>
</nav>
<p id="introduce">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p id="history">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<p id="maker">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>uj5u.com熱心網友回復：
您需要將錨點移動到單獨的物體，并將它們垂直移動到帶有填充的導航塊的高度。
* {
scroll-behavior: smooth;
}
nav {
position: sticky;
top: 0;
right: 0;
padding: 10x 0;
border: 1px solid red;
}
ul {
display: flex;
align-items: center;
gap: 30px;
}
li {
list-style: none
}
p {
margin-bottom: 300px;
}
div[id] {
transform: translateY(-62px);
}<nav>
<ul>
<li><a href="#introduce">introduce</a></li>
<li><a href="#history">history</a></li>
<li><a href="#maker">maker</a></li>
</ul>
</nav>
<div id="introduce"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<div id="history"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.</p>
<div id="maker"></div>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing
software like Aldus PageMaker including versions of Lorem Ipsum.</p>uj5u.com熱心網友回復：
我為你創建了一個演示，首先你應該使用 z-index 進行導航
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Courier New', Courier, monospace;
}
nav {
position: sticky;
top: 1rem;
left: 0;
z-index: 10;
background: #000;
}
ul {
min-width: 100%;
height: 10vh;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid;
}
li {
list-style: none;
margin: 1rem;
}
a {
text-decoration: none;
font-size: 1.5rem;
color: whitesmoke;
}
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Section</a></li>
</ul>
</nav>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Provident tempore laborum explicabo laudantium eum!
Modi! add some text</p>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/514523.html