Currently, I am utilizing snap.js to allow the sliding of the main content div using css3 and javascript, exposing a menu beneath.
However, I am encountering an issue when I apply the class snap-content to specify which div snap.js should slide - which is my main site wrapper. This is causing unexpected behavior for elements that rely on jQuery for their sizing.
Here's my dilemma.
I am using jQuery to fix an element when scrolling beyond 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");
}
}
});
});
Due to snap.js, I had to switch from $(window).scroll to $('#wrapper').scroll because the wrapper now contains the scrollable content. I suspect this change might be the cause of my issue.
Additionally, when the menu becomes fixed, I utilize jQuery to maintain its width equal to the container it was previously located in before becoming fixed:
jQuery(function ($) {
$(window).resize(_.debounce(function () {
var elementWidth = $('#sidebarWrapper').width();
$('#mainMenu').css('width', elementWidth + 'px');
}, 10));
});
Everything functions correctly before adding the class snap-content, allowing me to resize the browser without any complications.
However, when the class is applied, the sizing functionality stops working.
There are other sizing-related functions that start behaving unexpectedly as well, but this is just one example.
I initially thought it might be a conflict with my jQuery code, but I am using jQuery(function($) which is supposed to prevent that issue, right?