This in reference to the awesome scrollify library from Luke Haas: jQuery Scrollify - Power steering for your scroll wheel
In my project I’m having to redesign a couple of the sections to look better on mobile since styling the existing section just isn’t looking how I want it to. I end up making a new section and then setting the display of the desktop version to none. Now I’m getting an issue where Scrollify can’t scroll past the invisible section. Instead, it snaps back up to the top of the page. I’m guessing that Scrollify still “sees” it.
I’m getting this on both the mobile and desktop versions (In the desktop version: the mobile sections are hidden. In the mobile version: the desktop sections are hidden).
I have tried switching to fullpage.js to rectify the issue but it wasn’t playing nicely with my setup and webflow interactions.
There is currently a github link which talks about the issue. It would be nice to modify this code to get it to work with my setup: Breaks when display: none; · Issue #215 · lukehaas/Scrollify · GitHub
Here’s what I currently have pasted into my sitewide header code. WARNING: I AM NO CODER. :
// CHECKS WINDOW SIZE AND ADDS/REMOVES SECTIONS
var $window = $(window);
function checkWidth() {
var windowsize = $window.width();
// if windowsize is less than 647 it adds mobile sections and removes desktop sections.
if (windowsize < 647) {
.add(".section.mobile, .standard.mobile");
.remove(".section.desktop, .standard.desktop");
$.scrollify.update();
}
if (windowsize >= 647) {
.remove(".section.mobile, .standard.mobile");
$.scrollify.update();
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
Any help would be appreciated! This little problem is driving me nuts!