I am trying to reproduce this scrollspy example from bootstrap website.

Here is how I reproduce it: https://yue-site-front.herokuapp.com/ You can inspect the code.

The navigation links work good, but according to bootstrap's doc:

As you scroll the “spied” container, an .active class is added and removed from anchor links within the associated navigation.

This is something i didnt observe. I inspected the code and active class is not appeared as i view different titles on the screen.

I believe I am using data attribute method to let is work, as the doc showed here

Something confused me a bit more is that if i copy the whole html from inspection and paste it to somewhere like codeply: https://www.codeply.com/p/1mUZYRPstZ its all working fine, the active class is added normally.