On this Joomla dev site, I got Skrollr working to animate not only the desk objects on the home page, but also the header, which "shrinks" smaller down when you start scrolling. My problem is that when you click to the "Features" subpage, the Skrollr code (listed below) isn't being respected even though the code is there. For example the logo shrinks in size when you scroll on the home page, but it isn't on the Features page.
Does anyone see a conflict or anything that could cause this? I'm fairly certain all the same code from the home page is also on the features page so I don't understand why it won't work on both pages.
var setSkrollr = function($el, data) {
for (var i = 0, l = data.length; i < l; i++) {
var d = data[i],
px = d[0];
css = d[1];
$el.attr('data-' + px, css);
}
}
jQuery(function($) {
setSkrollr($('#t3-mainnav'), [[0, 'height: 100px'], [300, 'height: 50px']]);
setSkrollr($('#t3-mainnav .container'), [[0, 'top: 25px; height: 100px'], [300, 'top: 0px; height: 500px ']]);
setSkrollr($('.logo-image a'), [[0, 'margin-top:-10px'], [300, 'margin-top:3px']]);
setSkrollr($('.logo-img'), [[0, 'width: 300px'], [300, 'width: 200px']]);
...
If you open your browser console, you will see the following error:
JQuery(...).tooltip is not a function
This error can sometimes occur when the Tooltip is not called properly, or if there are 2 version of jQuery being imported on the site. In your case, there are 2 versions being imported.
The first is from Joomla's core which is fine, but your also importing this:
https://code.jquery.com/jquery-2.0.3.min.js
So try removing it