Smoother Lock Element to Top of Screen When Scrolling on Mobile Devices

Question

I am trying to smooth out a little function I've added to a wordpress theme that I'm developing. I was able to lock the navigation to the top of the screen after scrolling (only when window is between 300 and 500 pixels wide) thanks to these two Q&As from stack overflow:

Fix object to top of browser window when scrolling

and

How can I fix this element to stick at the top of the page on scroll?

The problem is if you view my website ( digitalbrent.com ) on a mobile device (I'm using an iphone 4), when you scroll down, you will notice that the navigation icons lock to the top of the screen, however you have to stop scrolling for the navigation to appear at the top. I'd like to fix it so that even while the user is actively scrolling, the navigation will just stop at the top of the page really smoothly instead of having to wait for the user to stop scrolling before it appears at the top. Can anyone point me in the right direction of how I could go about doing this? Is there a better function to use than .scroll? Any help or advice is greatly appreciated. Here is the code I'm using to lock the navigation to 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 reiterate, the code is working, I would just like to smooth it out on mobile devices.

Answer 1

I believe that mobile safari on the iPhone and iPad does not fire the onScroll event until after scrolling has stopped. Therefore, any script you have that adjusts your css once the user scrolls will not be executed until after they stop scrolling. Also, it does not continuously fire any events while scrolling. Android on the otherhand will fire the events immediately and constantly while scrolling. This is more responsive but can make any scroll-based processing bog down the phone since it is being fired at ~60 times per second.