My goal is quite simple and not too exciting: I need the second navigation bar to be installed in a fixed position at the very top of the screen when the user scrolls down the page.
My script is also simple:
var stickySubnavTop = $('#subnav').offset().top; var stickySubnav = function(){ var scrollTop = $(window).scrollTop(); if (scrollTop > stickySubnavTop-28) { $('#subnav').addClass('sticky'); } else { $('#subnav').removeClass('sticky'); } }; stickySubnav(); $(window).scroll(function() { stickySubnav(); });
Works like a charm on all desktop browsers, not iOS. Now here's what: I fully understand that iOS freezes the DOM when scrolling . However, I would like to know if there is a way to make the effect less harsh.
While searching for an answer, I came across several touch events that I am not familiar with. The touchmove listening touchmove , in particular, caught my attention, and I thought that I could try and make a script with it:
$(document).on('touchmove', function() { stickySubnav; });
What is it, run the script when the user scrolls while holding his finger on the screen. This does not work when they start scrolling with inertia, but nevertheless, this is enough to make the effect smoother, since the contents of the page make it so that the user is less likely to scroll quickly.
The problem is that when you run the script, this method scrolls on older phones. I found that class A5 processors can handle this very well, but anything less powerful will not be able to handle it, while maintaining a completely smooth scrolling experience.
My question is: is there a way to show that the script only works once every X milliseconds, or any other way to make this whole experience less frustrating?
thanks