One of the things you probably have noticed when you visit Bootstrap’s website is the right-side navigation that moves as you scroll through the page. This scrolling effect can be achieved combining the Affix and ScrollSpy jQuery plugins, both available as Bootstrap components.
In this article, I’ll show you how to add this cool feature to one of your own projects. As always, to better demonstrate these, I’ll use a demo project.
Let’s start by taking a look at the HTML structure of it.
The Basic Markup for Our Demo
For small screens we use a single column layout. For medium and large screens our layout will consist of two columns. On the one hand, we have the navigation, which occupies one quarter of a row’s width. On the other hand, we have the main content sections, which occupy the other three quarters of a row’s width. Each of these sections has an id attribute value that matches the href attribute value of the corresponding anchor (a) element.
In our example, we want the scrolling effect to occur only when the viewport exceeds 991px (i.e. medium and large screens). For this reason, we add the hidden-xs and hidden-sm helper classes to the navigation.
See the code below. Note that for brevity, we’re not including content that isn’t relevant to the technique.
This is an interesting question! I think your suggestions make sense. That said, by combining the available event with the HTML5 History API, you should be able to change the url hash.
First of all, thanks for this great guide. On my site: https://jtlm.be/resume.php I have implemented an affix.
However, because I use a navbar-fixed-top, the wrong listitem is selected, any idea how to fix this?
Can’t seem to find something on the internet. Thanks in advance.
Great article, very informative, and direct. I used it to identify a bug in a project I was working on. If you use 100% heights for the html & body of your HTML document, the affix plugin will not work correctly.
I posted a question here looking for any solution for using both the heights and the plugin simultaneously.
georgemarts thanx for giving your so nice article. I followed your instruction but my sidebar is not working as your demo site. I think I missed your scripting code. Can you please help me.
my main problem is
sidebar not scrolling
not changing the li classes with page scrolling
i can’t doing the javascript code
Can you elaborate the javascript code for me??
Hi, I used your guide and it was really helpful, the only problem is that the affix won’t change to affix-bottom when I arrive to the end of the page. I thought that it might have been because I didn’t have a footer, so I added one but still not working.