Smoother lock to the top of the screen when scrolling on mobile devices

Question

I am trying to smooth out a small function that I added to the Wordpress theme that I am developing. I was able to block navigation at the top of the screen after scrolling (only with a window width of 300 to 500 pixels) thanks to these two Q & As from:

Fix object at the top of browser window while scrolling

and

How can I fix this element so that it is at the top of the page in a scroll?

The problem is that you are browsing my site ( digitalbrent.com ) on a mobile device (I am using iphone 4), when you scroll down, you will notice that the navigation icons are blocked at the top of the screen, however you have to stop scrolling for navigation. so that it appears at the top. I would like to fix this, so even when the user actively scrolls, the navigation will just stop at the top of the page really smoothly, instead of waiting for the user to stop scrolling until it appears at the top. Can someone point me in the right direction, how can I do this? Is there a more efficient function than .scroll? Any help or advice greatly appreciated. Here is the code that I use to block navigation at the top of the screen:

JQuery

$(function() { var max_scroll = $("#nav").position().top; $(document).ready(function() { $(window).scroll(function() { var navAdjust = $(".navScroll"); var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; if (scrollTop > max_scroll && !navAdjust.is(".navScrollFixed")) { navAdjust.addClass("navScrollFixed"); } else if (scrollTop < max_scroll && navAdjust.is(".navScrollFixed")) { // console.log("return to normal"); navAdjust.removeClass("navScrollFixed"); } }); }); }); 

CSS

 #nav.navScrollFixed{ position:fixed; top: 0; z-index: 100; background: black; border-bottom: 5px solid #27f231; width: 100%; left: 0; margin-left: 0px; margin-top: 0px; } 

HTML:

 <div id="nav" class="navScroll"> <ul> <li id="home"> <div class="navIcon"></div> Home </li> <li id="blog"> <div class="navIcon"></div> Blog </li> <li id="resume"> <div class="navIcon"></div> Resume </li> <li id="portfolio"> <div class="navIcon"></div> Portfolio </li> <li id="lab"> <div class="navIcon"></div> &nbsp;Lab&nbsp; </li> <li id="contact"> <div class="navIcon"></div> Contact </li> </ul> </div> 

To repeat, the code works, I just would like to smooth it on mobile devices.

Answer 1

I believe that mobile safari on iPhone and iPad does not trigger an onScroll event until scrolling stops. This way, any script that you have configures your css after custom scrolls are not executed until they stop scrolling. In addition, when scrolling, it does not constantly trigger any events. Android, on the other hand, will fire events immediately and continuously while scrolling. This is more responsive, but can make any scroll-based processing work with the phone, as it starts ~ 60 times per second.