Search code examples
javascripttwitter-bootstrapruby-on-rails-4twitter-bootstrap-3turbolinks

Bootstrap affix using data-attributes only works on page reload


I am working on a Rails4 application using bootstrap affix functionality via data-attributes.

I am using the data-attributes like this:

<div data-spy="affix" data-offset-top="300" data-offset-bottom="615">
...stuff...
...stuff...
...stuff...
</div>

My only CSS for the affix classes is the following:

.affix {
    width: 255px;
    margin-top: -300px;
}

.affix-bottom {
    position: relative;
}

.affix-top {
    position: relative;
}

Everything works perfectly when I reload the page, except that it does not work when I navigate to it initially from another page on my web application.

Seems other people has trouble with this and its a turbolinks issue. Tried all their approaches but nothing worked: tried using jquery-turbolinks nothing so i just ended up removing turbolinks all together.. Would rather use turbolinks if I can get this to work if someone knows a way I can do it. Any ideas about why this can be happening?


Solution

  • I just removed turbolinks to make this work. Could not find a way to make this work with Turbolinks.