I am trying to implement Scrollspy with list group in Bootstrap 4, but it doesn't work

Question

I was trying to get a scrollspy but the elements which I am spying on and the contents appear separate, they appear one below the other.

#list-example{
  position: relative;
  overflow-y: scroll;
  height: 300px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container-fluid">
    <div id="list-example" class="list-group" >
        <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
        <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
        <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
        <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
    </div>
    <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
        <h4 id="list-item-1">Item 1</h4>
        <p>...</p>
        <h4 id="list-item-2">Item 2</h4>
        <p>...</p>
        <h4 id="list-item-3">Item 3</h4>
        <p>...</p>
        <h4 id="list-item-4">Item 4</h4>
        <p>...</p>
    </div>
</div>

Here is a https://codepen.io/ShreyasG/pen/YzqmqMv snippet

Answer 1

Try this code.

<div class="container-fluid">
<div  class="list-group fixed-top"  data-spy="scroll" data-target="#list-example" data-offset="0">
    <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
    <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
    <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
    <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
</div>
<div  class="scrollspy-example" id="list-example">
    <h4 id="list-item-1">Item 1</h4>
    <p>...</p>
    <h4 id="list-item-2">Item 2</h4>
    <p>...</p>
    <h4 id="list-item-3">Item 3</h4>
    <p>...</p>
    <h4 id="list-item-4">Item 4</h4>
    <p>...</p>
</div>

Answer 2

Change the #list-example class to ".scrollspy-example", then change the height to 150px.

.scrollspy-example {
  position: relative;
  overflow-y: scroll;
  height: 150px;
}

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" />

<div class="container-fluid">
  <div id="list-example" class="list-group">
    <a class="list-group-item list-group-item-action" href="#list-item-1">Item 1</a>
    <a class="list-group-item list-group-item-action" href="#list-item-2">Item2</a>
    <a class="list-group-item list-group-item-action" href="#list-item-3">Item 3</a>
    <a class="list-group-item list-group-item-action" href="#list-item-4">Item 4</a>
  </div>
  <div data-spy="scroll" data-target="#list-example" data-offset="0" class="scrollspy-example">
    <h4 id="list-item-1">Item 1</h4>
    <p>...</p>
    <h4 id="list-item-2">Item 2</h4>
    <p>...</p>
    <h4 id="list-item-3">Item 3</h4>
    <p>...</p>
    <h4 id="list-item-4">Item 4</h4>
    <p>...</p>
  </div>
</div>

Make sure to view it in Full Page..