html - 如何使菜单仅在一个部分内滚动页面？

Question

我正在尝试创建一个页面，其中有一个仅在页面的特定部分内滚动的侧边菜单。我正在使用 Bootstrap，其中行有两列，左边包含我要滚动的菜单，右边包含页面的内容。在相关行的上方和下方还有其他行。当用户滚动(或使用菜单)时，我希望菜单与他们一起滚动，但只在它所在的行内滚动(这样它只保留它链接到的内容)。我试过使用 position: fixed，但这会让菜单移到父行之外。我也尝试过 position: sticky，但实际上它似乎什么也没做。这是我到目前为止的代码。预先感谢您的提示。

<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。并且还在空父 div sampleDiv 中使用固定菜单。我希望这个解决方案对您有所帮助。

.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 -->