我是HTML, CSS和Bootstrap的新手。
我正在寻找的是一种方法，使导航条固定仅在网页的一部分。
一个明显的例子是:
http://pascalvangemert.nl/
你可以看到导航条开始于"Profile">
是否有一个css或bootstrap的方式来做到这一点?
感谢<body>
<div class="jumbotron intro">
<div class="container-fluid intro-image">
<div class="row">
<div class="col-lg-12">
<img src="/imagenes/fondo6.jpg" class="imagen">
<h1>Ariel Curuchaga</h1>
<hr class="dotted-line" style="border-top: dotted 5px">
<p class="intro-paragraph">Interactive Resume</p>
</img>
</div>
</div>
</div>
</div>
<div>
<nav id="navbar" class="navbar navbar-inverse barra" role="navigation">
<ul class="list-group">
<li class="list-group-item list-group-item-action list-group-item-dark"><i class="fas fa-arrow-circle-up"></i>
</li>
<li class="list-group-item list-group-item-action list-group-item-dark">Profile</li>
<li class="list-group-item list-group-item-action list-group-item-dark">Experience</li>
<li class="list-group-item list-group-item-action list-group-item-dark">Education</li>
<li class="list-group-item list-group-item-action list-group-item-dark">Goals</li>
</ul>
</nav>
<div class="profile">
<h2>About Me</h2>
</div>
<div class="experience">
<h2>About Me</h2>
</div>
<div class="education">
<h2>About Me</h2>
</div>
<div class="goals">
<h2>About Me</h2>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
.imagen {
height: 100vh;
width: 100vw;
margin: 0;
filter: opacity(0.4) drop-shadow(0 0 0 pink);
}
.intro {
position: relative;
margin: 0;
text-align: center;
}
.intro-image {
padding: 0;
}
h1 {
position: absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Sawarabi Mincho', sans-serif;
font-weight: 700;
font-size: 60px;
letter-spacing: 8px;
}
.dotted-line {
position: absolute;
width: 32%;
top: 50%;
left: 32%;
color: #6b6e6e;
margin: 0;
padding: 0;
}
.intro-paragraph {
position: absolute;
top: 60%;
left: 50%;
transform: translate(-50%, -50%);
font-family: 'Sawarabi Mincho', sans-serif;
font-size: 30px;
}
.barra {
border-radius: 30%;
padding: 0;
opacity: 80%;
position: sticky;
top: 0;
z-index: -1;
}
.list-group {
text-align: center;
}
.profile {
background-color: yellowgreen;
height: 100vh;
width: 100vw;
}
你可以使用粘贴定位:
#navBar {
position: sticky;
top: /*distance from top of page*/
}
这使得所讨论的元素遵循正常的页面顺序，直到到达它，然后它变得固定。但是，请记住IE不支持它。
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: "Lato", sans-serif;
}
.sidenav {
width: 130px;
position: fixed;
z-index: 1;
top: 20px;
left: 10px;
background: #eee;
overflow-x: hidden;
padding: 8px 0;
}
.sidenav a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 25px;
color: #2196F3;
display: block;
}
.sidenav a:hover {
color: #064579;
}
.main {
margin-left: 140px; /* Same width as the sidebar + left position in px */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
</style>
</head>
<body>
<div class="sidenav">
<a href="#about">About</a>
<a href="#services">Services</a>
<a href="#clients">Clients</a>
<a href="#contact">Contact</a>
</div>
<div class="main">
<h2>Auto Sidebar</h2>
<p>This sidebar is as tall as its content (the links), and is always shown.</p>
<p>Scroll down the page to see the result.</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>