Bootstrap 4 scrollspy with list-group doesn't work

Question

I am trying to implement Scrollspy with list group in Bootstrap 4, but it doesn't work. Scroll content contains data-spy="scroll" data-target="#fixed-menu" data-offset="0" and menu contains id="fixed-menu" .

Here is jsfiddle

html

<main class="Site-content">
  <div class="view">
    <div class="container-full">
      <div class="row ml-1">
        <div className="col col-10 ml-1" data-spy="scroll" data-target="#fixed-menu" data-offset="0">
        <h3>Create</h3>
        <div id="main1" class="card" style="width: 18rem;">
          <div class="card-body">
            <h5 class="card-title">Main1</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.</p>
          </div>
        </div>
        <div id="main2" class="card" style="width: 18rem;">
          <div class="card-body">
            <h5 class="card-title">Main2</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.</p>
          </div>
        </div>
        <div id="main3" class="card" style="width: 18rem;">
          <div class="card-body">
            <h5 class="card-title">Main3</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.</p>
          </div>
        </div>
        <div id="main4" class="card" style="width: 18rem;">
          <div class="card-body">
            <h5 class="card-title">Main4</h5>
            <p class="card-text">With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.With supporting text below as a natural lead-in to additional content.</p>
          </div>
        </div>
        </div>
        <div
       id="fixed-menu"
       class="list-group fixedMenu"
       >
              <a class="list-group-item list-group-item-action listItem__link d-flex py-2 px-3" href="#main1">
                Main1
              </a>
              <a class="list-group-item list-group-item-action listItem__link d-flex py-2 px-3" href="#main2">
                Main2
              </a>
              <a
                class="list-group-item list-group-item-action listItem__link d-flex py-2 px-3"
                href="#main3"
              >
                Main3
              </a>
              <a
                class="list-group-item list-group-item-action listItem__link d-flex py-2 px-3"
                href="#main4"
              >
                Main4
              </a>
            </div>
      </div>
    </div>
  </div>
</main>

css

.Site-content{
  flex: 1;
}

.fixedMenu{
  width: 110px;
  position: fixed;
  right: 0;
}

Answer 1

如Bootstrap文档所示，在scrollspy元素的父元素上使用适当的数据属性...

<body data-spy="scroll" data-target="#fixed-menu" data-offset="0">

Bootstrap 4 scrollspy with list-group doesn't work

Question

1 answers

solution1
2 ACCPTED 2018-06-11 12:57:30

Bootstrap 4 scrollspy with list-group doesn't work

Question

1 answers

solution1 2 ACCPTED 2018-06-11 12:57:30

solution1
2 ACCPTED 2018-06-11 12:57:30