Understanding Bootstrap's Affix and ScrollSpy plugins

Originally published at: http://www.sitepoint.com/understanding-bootstraps-affix-scrollspy-plugins/

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.

Continue reading this article on SitePoint

Thanks, nice article! Could you maybe also elaborate on what to do to implement a url hash change on scrolling? I know there is a

on('activate.bs.scrollspy', function () {

Would that be the way to go? (Maybe with HTML5’s push.state?)

Hi @rowild,

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.

Hi

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.

Kind regards
Jorim

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.

Stack Overflow Question: Use 100 height with bootstrap affix data-offset-bottom

I assume you have solved it using vh units for the height now and removing the html body rules?

Thanks @PaulOB that seems to be the best solution, with decent support. The only issue I found was with iOS.

The workaround that I was trying to avoid doing in the end is needed for iOS:
vh iOS workaround

It seems like an easy solution would be to use the `locaion.hash’ javascript property when adding ‘active’ class.

Location Hash Property`

vh seems to be working in ios 8.3 as far as I can see or was there a specific issue?

Didnt see anything specific, was just checking caniuse.

hei,

    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

  1. sidebar not scrolling
  2. not changing the li classes with page scrolling
  3. i can’t doing the javascript code
    Can you elaborate the javascript code for me??

Hi @Md_Sagor Do you have a demo available? Also, I suggest using the demo of this article as a starting point!

thank you for your reply.
here is my link http://mdsagorsbd.tk/my/affix%20exercise/affix.html
how to do like you…>>

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.

Here is a demo of my site : http://2015.igem.org/Team:EPF_Lausanne/Test

As you can see, when you scroll to the end of the page the sidebar won’t stop. you can also see the css here if you want : http://2015.igem.org/Team:EPF_Lausanne/Test/css?action=raw

Thank you for your time and this great article !
Axel

Would be helpful if the pen was (still) working!

Hi idleberg, welcome to the forum

From what I can see, it looks like Bootstrap no longer has the right side navigation it had when this article was publshed in February.

The Codepen linked to in the first post does still work.

Is it not looking / acting like you thought it would or am I missing something?

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.