I'm using snap.js which enables you to slide your main content div over using css3 and javascript, revealing a menu underneath.
The problem I am having is that when I apply the class snap-content, which tells snap.js which div to slide, that being my main site wrapper, the elements relying on jQuery for their sizing behave unexpectedly.
Here's my situation.
I'm using jQuery to make an element fixed when scrolling past a certain point:
jQuery(document).ready(function ($) {
$(window).scroll(function () {
if ($(this).scrollTop() > 140) {
if ($("#mainMenu").css('position') !== 'fixed') {
$("#mainMenu").css("position", "fixed");
}
} else {
if ($("#mainMenu").css('position') !== 'static') {
$("#mainMenu").css("position", "static");
}
}
});
});
When using snap.js I had to change $(window).scroll to $('#wrapper').scroll because the wrapper is now the scrollable content. I believe this could have something to do with my problem.
When the menu becomes fixed I use some jQuery to keep it the same width as the container it was inside before it became fixed:
jQuery(function ($) {
$(window).resize(_.debounce(function () {
var elementWidth = $('#sidebarWrapper').width();
$('#mainMenu').css('width', elementWidth + 'px');
}, 10));
});
This all works fine before I add the class snap-content, and I can resize the browser without any problems.
When the class is added the sizing no longer works.
There are other functions to do with sizing that start to act unexpectedly too but this is just an example.
I assumed it might be something clashing with my jQuery but I'm using jQuery(function($) so that should stop that right?
