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

仅将position:sticky与z-index属性一起使用。并且还可以使用空白父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 -->

如何使菜单仅在部分区域内滚动？

1 个答案: