Jquery update scroll position while scrolling, not when scroll complete

Question

I have the following jquery script, and I'm noticing some odd behaviour.

As you can see in the snippet below, the header changes once you've scrolled past 5px. The problem is, that this will not run if you are in the progress of scrolling. It will not update until the scroll bar comes to a stop (either while holding, or let go)

How can I get this to update, even if the scroll bar is in motion?

Extra JSFiddle here: https://jsfiddle.net/level42/ofbd8sp6/

$(document).ready(function() {
    /*
     navOffset - The distance in which to trigger the events
     scrollPos - The position Y that the page has been scrolled
    */

    var navOffset = 5 /*$("header").offset().top;*/

    $(window).scroll(function() {
        var scrollPos = $(window).scrollTop();
        $("header").stop(true);
        if (!$("header").hasClass("full") || scrollPos < navOffset) {
            if (scrollPos > navOffset) {
                $("header").fadeTo(200, 0, function() {
                    $("header").addClass("full");
                });
                $("header").fadeTo(200, 1);
            } else {
                $("header").fadeTo(200, 0, function() {
                    $("header").removeClass("full");
                });
                $("header").fadeTo(200, 1);
            }
        }
    });
});

header {
    padding: 5px 0 0 0;
    width: 100%;
    height: 100px;
    position: fixed;
    z-index: 999;
    background: rgba(0, 0, 0, 0) 10%;
}

header.full {
    height: 100px;
    background: rgba(27, 39, 53, 1) 10%;
}

body {
    background-color: green;
    padding: 0px;
    margin: 0px;
    height: 1000px;
}

#wrapper {
    padding-top: 120px;
}

<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>

<header>
    <div id="header">
        <div id="logo">
            <a href="index.html">
                <span>
                    LOGO
                </span>
            </a>
        </div>
    </div>
</header>

<body>
    <div id="wrapper">
        <p>
            Hello World
        </p>
        <p>
            Hello World
        </p>
        <p>
            Hello World
        </p>
        <p>
            Hello World
        </p>
        <p>
            Hello World
        </p>
        <p>
            Hello World
        </p>
        <p>
            Hello World
        </p>

    </div>

</body>

see this : http://stackoverflow.com/questions/9144560/jquery-scroll-detect-when-user-stops-scrolling — Araz Shamsaddinlouy, Oct 24 '16 at 15:58
This seems to provide the ability to capture when the scrolling has stopped, where as I want to capture the scrolling while it is occuring. — level42, Oct 24 '16 at 16:25
try to use $(document).on("scroll",function(){} ... this trigger the function while scrolling — Araz Shamsaddinlouy, Oct 24 '16 at 16:27
It still only seems to apply the function when the scrolling stops. — level42, Oct 24 '16 at 19:59
put a console.log in the $(document).on("scroll" and check whether its triggered — Araz Shamsaddinlouy, Oct 24 '16 at 20:03
Ok, my jsfiddle is logging the scrolled event that you've created, but my header still wont appear until the scrolling has stopped. https://jsfiddle.net/level42/ofbd8sp6/ — level42, Oct 25 '16 at 00:43

Jquery update scroll position while scrolling, not when scroll complete

0 Answers0