Help-Understanding Scrollspy

Help-Understanding Scrollspy
0.0 0

#1

Hi,
I have been following Bootstrap 4 documentation to understand the working of scrollspy.
My scrollspy does not seem to work. I have used the example from documentation. Please guide what I am doing wrong.
Here is the link:
scrollspy


#2

Part of your problem is that you need to add the jquery library (and it must be before the Bootstrap library is added). In codepen do that in settings, not your code.

I played around with your pen some and tested a few things. Still not perfect but better.
I added a body tag and some attributes to nav tag

<body data-spy="scroll" data-target=".navbar" data-offset="100">
<nav id="navbar-example2" class="navbar fixed-top">

I also put some padding at top to make room for navbar.

body{
  position:relative;
  padding-top:50px;
}

I have always found this frustrating too. Mine never seems to work exactly like example without some serious tweaking. The offset / padding thing always gives me trouble. You may want to find an online tutorial to walk you through this in more detail than is given in the official docs.

You might want to change your codepen link. That link goes to some presentation mode where the visitor cannot see your code.


#3

Thank you so much! that fixed the problem.:grinning:
Bootstrap documentation was not clear about the body tags and examples do not work as expected and that gets frustrating, atleast for me being new to web development. Do you recommend any online tutorial for bootstrap 4?

and yes here is the updated link:
https://codepen.io/ridafatima15h1/pen/qYPjpp?editors=1100

Thankyou so much again. This help was much needed:sweat_smile: