Как сделать прокрутку меню со страницей только внутри раздела?

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