如何使菜单滚动时页面只在一个部分内

Question

我正在尝试创建一个页面，其中有一个只在页面的某个部分滚动的侧菜单。我使用Bootstrap，行有两列，左边包含我想要滚动的菜单，右边包含页面的内容。上面和下面还有其他行。当用户滚动(或使用菜单(时，我希望菜单与他们一起滚动，但只在它所在的行内滚动(这样它只与链接到的内容保持一致(。我尝试过使用position:fixed，但这可以让菜单移动到父行之外。我也试过这种姿势：黏黏的，但实际上似乎根本没什么作用。这是我目前掌握的代码。提前感谢您的提示。

<div class="row d-flex justify-content-center my-4 service-content">
<!-- Side Menu -->
<div class="col-md-4 d-none d-md-flex justify-content-center cosmetic-menu-parent">
<div id="cosmeticMenu" class="list-group">
<a
class="list-group-item list-group-item-action"
href="#list-item-1"
>BOTOX®</a
>
<a
class="list-group-item list-group-item-action"
href="#list-item-2"
>Acne</a
>
<a
class="list-group-item list-group-item-action"
href="#list-item-3"
>Fillers</a
>
</div>
</div>
<!-- Section Content -->
<div class="col-12 col-md-8">
<div
data-spy="scroll"
data-target="#cosmeticMenu"
data-offset="0"
class="scrollspy-example"
>
<h4 id="list-item-1" class="mb-4">BOTOX®</h4>
<h5>What is BOTOX®?</h5>
<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.
</p>
<h4 id="list-item-2">Acne</h4>
<p>...</p>
<h4 id="list-item-3">Fillers</h4>
<p>...</p>
</div>
</div>
</div

Answer 1

只需使用带有z-index属性的position:sticky。也可以在空的父divsampleDiv中使用固定菜单。我希望这个解决方案对你有帮助。

.stickyMenu {
position: sticky;
top: 0px;
z-index: 1019;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<div class="row d-flex justify-content-center my-4 service-content">
<!-- Side Menu -->
<div class="col-md-4 d-none d-md-flex justify-content-center cosmetic-menu-parent">
<div class="sampleDiv">
<div class="stickyMenu">
<div id="cosmeticMenu" class="list-group">
<a class="list-group-item list-group-item-action" href="#list-item-1">BOTOX®</a>
<a class="list-group-item list-group-item-action" href="#list-item-2">Acne</a>
<a class="list-group-item list-group-item-action" href="#list-item-3">Fillers</a>
</div>
</div>
</div>
</div>
<!-- Section Content -->
<div class="col-12 col-md-8">
<div data-spy="scroll" data-target="#cosmeticMenu" data-offset="0" class="scrollspy-example">
<h4 id="list-item-1" class="mb-4">BOTOX®</h4>
<h5>What is BOTOX®?</h5>
<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.</p>
		<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.</p>
<h4 id="list-item-2">Acne</h4>
<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.</p>
		<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. </p>
<h4 id="list-item-3">Fillers</h4>
<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.</p>
		<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.</p>
</div>
</div>
</div>
<div style="height: 900px;">&nbsp;</div><!-- Remove this height in your code -->