Bootstrap 4 - Scrollspy Not Working

Question

I have followed the documentation on how to use Scrollspy in BS4, but it is not working, so how do I solve it? My body has posistion: relative This is my body tag:

Solution 1:

Make sure you're using fixed-top to attach the navbar to the top,

<navclass="navbar navbar-toggleable-md fixed-top navbar-light bg-faded">
  ..
</nav>

and the body tag:

<body data-spy="scroll" data-target="#navbar1" data-offset="70">

Bootstrap 4 Scrollspy Demo

EDIT:navbar-toggleable-md has changed to navbar-expand-lg in Bootstrap 4.0.0

Solution 2:

You content sections must have unique ID (#about) which is connected to an anchor in the navigation. (Your #home ID is valid only)

Correct:

<liclass="nav-item active"><aclass="nav-link"href="#home">Home </a></li>

Wrong:

<liclass="nav-item"><aclass="nav-link"href="#">Nieuws</a></li>

Solution 3:

My BS4 sticky-top navbar started scrolling up and disappeared when scrolling down. Removed the CSS below I added for some purpose and worked again.

body, html {
    height: 100%;
}

Solution 4:

Bootstrap 3.3.7 puts the active class on the li element, and bootstrap 4 puts the active class on the a tag. Make sure to set styles accordingly. For a sticky navbar, assign the class .fixed-top to the navbar.

Solution 5:

Class active .active is the solution. Just add this to your css styles:

.nav-link.active {
background-color: white; 
color: #f4511e;           
}

That .active makes the difference. Change background-color and color at your will.

Also it is important to set:

body {position: relative}

Html5 Works