Menu
I am using Bootstrap 3.2.0. I am trying to use two bootstrap javascript features together: Scrollspy and Affix. The goal is to make a scrollspy on the side that will scroll with the rest of the page using affix. Demo
Below is my javascript file, included in the head by Rails asset pipeline.
$(document).ready(function () {
// Use affix plugin
$("#sidebar").affix({
offset: { top: 280 }
});
// Use Scrollspy
$('body').scrollspy({ target: '#sidebar', offset: 200 });
}
The scrollspy works smoothly, but affix plugin does not, unless I refresh the page after initial loading. Using developer tools in chrome, I noticed that the javascript does not add affix-top to sidebar the first time page loads.
When I put the affix plugin javascript directly into the body, it works without refreshing. But I don't really want to use inline javascript. And I am really curious why this strange behavior is happening.
I am using Rails 4.1.5.
558
Turbolinks
The issue is almost certainly Turbolinks - a javascript library which is meant to speed up your pages by only retreiving the <body> tag from the new request, leaving the <head> intact.
Although Turbolinks is very effective, it does have a tendancy to "break" application functionality through not refreshing the Javascript on your page.
--
The issue is that because JS only binds to DOM elements which are loaded when the JS has been loaded. If Turbolinks loads new elements without refreshing JS, it inadvertently makes JS think that you have not refreshed your elements / page, thus preventing it from being able to "bind" to your new elements
The solution to this is two-fold:
- "Delegate" your JS from a consistent element (typically
document)- Use the Turbolinks "event hooks" to manage on-page JS events
Here's what I'd do:
#app/assets/javascripts/application.js
var loaded = function(){
// Use affix plugin
$("#sidebar").affix({
offset: { top: 280 }
});
// Use Scrollspy
$('body').scrollspy({ target: '#sidebar', offset: 200 });
}
$(document).on("page:load ready", loaded);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
