粘性侧边栏不粘
Sticky Sidebar not Sticking
我想制作一个停在网页 header 图像底部的粘性侧边栏，但我无法让它工作。我在下面的代码片段和 this JSFiddle 中重新创建了问题，在 at/test 中看起来可能更容易。
边栏是我想要的样子，但是当我向下滚动时它不会停在页面顶部
.about {
margin-top: 50px;
}
h4 {
padding-left: 0.3rem;
}
.about-header-image {
background-size: cover !important;
background-color: #919191;
width: 100%;
border-radius: 0px !important;
padding-top: 3rem !important;
padding-bottom: 2rem !important;
margin-bottom: 0px;
margin-top: 42px !important;
}
.nav-with-bar ul {
list-style-type: none;
padding-left: 10px;
}
.nav-with-bar.aboutnav {
position: sticky;
margin-top: 25px;
padding: 0px;
bottom: 100%;
z-index: 100;
width: 150px;
}
.nav-with-bar h5 {
text-decoration: underline;
}
.nav-with-bar .nav-link:hover {
text-decoration: underline;
}
.nav-with-bar .nav-link.active {
border-right: 3px solid blue;
}
.nav-with-bar a {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
}
.nav-with-bar a:hover {
color: #064579;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap" rel="stylesheet">
<div class="content">
<nav class="navbar fixed-top navbar-expand-lg bg-dark">
<div class="d-flex flex-grow-1 container-fluid pl-2">
<a class="navbar-brand text-white" href="/Index">
<span style="white-space: nowrap;" class="d-inline-block">Website</span>
</a>
</div>
</nav>
<div class="about-header-image" style="background-image: url(Assets/Wallpaper.jpg) !important;">
<div class="my-auto text-center">
<h1 style="font-family: 'Crimson Text', serif; font-size: 4em;" class="text-white d-inline-block">
Website Name
</h1>
</div>
</div>
<div class="h-100">
<div class="nav-with-bar aboutnav d-md-inline-block offset-1 col-2 d-none mr-3">
<h5>About Us</h5>
<ul>
<li>
<a href="/About#purpose" class="nav-link">Purpose</a></li>
<li>
<a href="/About#founding" class="nav-link">Founding</a></li>
<li>
<a href="/About#future" class="nav-link">Future</a></li>
<li>
<a href="/About#contributors" class="nav-link">Contributors</a></li>
<li>
<a href="/About#contact" class="nav-link">Contact</a></li>
</ul>
</div>
<div class="col-md-7 d-inline-block about">
<div id="purpose" style="font-size: x-large;">
<h4 class="mb-0">Filler Text</h4>
<hr class="nogap">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
我已经在 css 中标记了我所有的编辑。
.about {
margin-top: 50px;
}
h4 {
padding-left: 0.3rem;
}
.h-100 {
display: flex; /*add this it*/
}
.about-header-image {
background-size: cover !important;
background-color: #919191;
width: 100%;
border-radius: 0px !important;
padding-top: 3rem !important;
padding-bottom: 2rem !important;
margin-bottom: 0px;
margin-top: 42px !important;
}
.nav-with-bar ul {
list-style-type: none;
padding-left: 10px;
}
.nav-with-bar.aboutnav {
position: sticky;
top: 81px; /*add this it*/
margin-top: 25px;
padding: 0px;
bottom: 100%;
z-index: 100;
width: 150px;
display: flex!important; /*add this it*/
flex-direction: column; /*add this it*/
height: 100%; /*add this it*/
}
.nav-with-bar h5 {
text-decoration: underline;
}
.nav-with-bar .nav-link:hover {
text-decoration: underline;
}
.nav-with-bar .nav-link.active {
border-right: 3px solid blue;
}
.nav-with-bar a {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
}
.nav-with-bar a:hover {
color: #064579;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap" rel="stylesheet">
<div class="content">
<nav class="navbar fixed-top navbar-expand-lg bg-dark">
<div class="d-flex flex-grow-1 container-fluid pl-2">
<a class="navbar-brand text-white" href="/Index">
<span style="white-space: nowrap;" class="d-inline-block">Website</span>
</a>
</div>
</nav>
<div class="about-header-image" style="background-image: url(Assets/Wallpaper.jpg) !important;">
<div class="my-auto text-center">
<h1 style="font-family: 'Crimson Text', serif; font-size: 4em;" class="text-white d-inline-block">
Website Name
</h1>
</div>
</div>
<div class="h-100">
<div class="nav-with-bar aboutnav d-md-inline-block offset-1 col-2 d-none mr-3">
<h5>About Us</h5>
<ul>
<li>
<a href="/About#purpose" class="nav-link">Purpose</a></li>
<li>
<a href="/About#founding" class="nav-link">Founding</a></li>
<li>
<a href="/About#future" class="nav-link">Future</a></li>
<li>
<a href="/About#contributors" class="nav-link">Contributors</a></li>
<li>
<a href="/About#contact" class="nav-link">Contact</a></li>
</ul>
</div>
<div class="col-md-7 d-inline-block about">
<div id="purpose" style="font-size: x-large;">
<h4 class="mb-0">Filler Text</h4>
<hr class="nogap">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
我想制作一个停在网页 header 图像底部的粘性侧边栏，但我无法让它工作。我在下面的代码片段和 this JSFiddle 中重新创建了问题，在 at/test 中看起来可能更容易。
边栏是我想要的样子，但是当我向下滚动时它不会停在页面顶部
.about {
margin-top: 50px;
}
h4 {
padding-left: 0.3rem;
}
.about-header-image {
background-size: cover !important;
background-color: #919191;
width: 100%;
border-radius: 0px !important;
padding-top: 3rem !important;
padding-bottom: 2rem !important;
margin-bottom: 0px;
margin-top: 42px !important;
}
.nav-with-bar ul {
list-style-type: none;
padding-left: 10px;
}
.nav-with-bar.aboutnav {
position: sticky;
margin-top: 25px;
padding: 0px;
bottom: 100%;
z-index: 100;
width: 150px;
}
.nav-with-bar h5 {
text-decoration: underline;
}
.nav-with-bar .nav-link:hover {
text-decoration: underline;
}
.nav-with-bar .nav-link.active {
border-right: 3px solid blue;
}
.nav-with-bar a {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
}
.nav-with-bar a:hover {
color: #064579;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap" rel="stylesheet">
<div class="content">
<nav class="navbar fixed-top navbar-expand-lg bg-dark">
<div class="d-flex flex-grow-1 container-fluid pl-2">
<a class="navbar-brand text-white" href="/Index">
<span style="white-space: nowrap;" class="d-inline-block">Website</span>
</a>
</div>
</nav>
<div class="about-header-image" style="background-image: url(Assets/Wallpaper.jpg) !important;">
<div class="my-auto text-center">
<h1 style="font-family: 'Crimson Text', serif; font-size: 4em;" class="text-white d-inline-block">
Website Name
</h1>
</div>
</div>
<div class="h-100">
<div class="nav-with-bar aboutnav d-md-inline-block offset-1 col-2 d-none mr-3">
<h5>About Us</h5>
<ul>
<li>
<a href="/About#purpose" class="nav-link">Purpose</a></li>
<li>
<a href="/About#founding" class="nav-link">Founding</a></li>
<li>
<a href="/About#future" class="nav-link">Future</a></li>
<li>
<a href="/About#contributors" class="nav-link">Contributors</a></li>
<li>
<a href="/About#contact" class="nav-link">Contact</a></li>
</ul>
</div>
<div class="col-md-7 d-inline-block about">
<div id="purpose" style="font-size: x-large;">
<h4 class="mb-0">Filler Text</h4>
<hr class="nogap">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>
我已经在 css 中标记了我所有的编辑。
.about {
margin-top: 50px;
}
h4 {
padding-left: 0.3rem;
}
.h-100 {
display: flex; /*add this it*/
}
.about-header-image {
background-size: cover !important;
background-color: #919191;
width: 100%;
border-radius: 0px !important;
padding-top: 3rem !important;
padding-bottom: 2rem !important;
margin-bottom: 0px;
margin-top: 42px !important;
}
.nav-with-bar ul {
list-style-type: none;
padding-left: 10px;
}
.nav-with-bar.aboutnav {
position: sticky;
top: 81px; /*add this it*/
margin-top: 25px;
padding: 0px;
bottom: 100%;
z-index: 100;
width: 150px;
display: flex!important; /*add this it*/
flex-direction: column; /*add this it*/
height: 100%; /*add this it*/
}
.nav-with-bar h5 {
text-decoration: underline;
}
.nav-with-bar .nav-link:hover {
text-decoration: underline;
}
.nav-with-bar .nav-link.active {
border-right: 3px solid blue;
}
.nav-with-bar a {
padding-top: 5px;
padding-bottom: 5px;
padding-left: 0px;
}
.nav-with-bar a:hover {
color: #064579;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css2?family=Crimson+Text&display=swap" rel="stylesheet">
<div class="content">
<nav class="navbar fixed-top navbar-expand-lg bg-dark">
<div class="d-flex flex-grow-1 container-fluid pl-2">
<a class="navbar-brand text-white" href="/Index">
<span style="white-space: nowrap;" class="d-inline-block">Website</span>
</a>
</div>
</nav>
<div class="about-header-image" style="background-image: url(Assets/Wallpaper.jpg) !important;">
<div class="my-auto text-center">
<h1 style="font-family: 'Crimson Text', serif; font-size: 4em;" class="text-white d-inline-block">
Website Name
</h1>
</div>
</div>
<div class="h-100">
<div class="nav-with-bar aboutnav d-md-inline-block offset-1 col-2 d-none mr-3">
<h5>About Us</h5>
<ul>
<li>
<a href="/About#purpose" class="nav-link">Purpose</a></li>
<li>
<a href="/About#founding" class="nav-link">Founding</a></li>
<li>
<a href="/About#future" class="nav-link">Future</a></li>
<li>
<a href="/About#contributors" class="nav-link">Contributors</a></li>
<li>
<a href="/About#contact" class="nav-link">Contact</a></li>
</ul>
</div>
<div class="col-md-7 d-inline-block about">
<div id="purpose" style="font-size: x-large;">
<h4 class="mb-0">Filler Text</h4>
<hr class="nogap">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
</div>
</div>
</div>