Question

我有以下jquery脚本，我注意到一些奇怪的行为。

正如您在下面的代码段中所看到的，一旦您滚动超过5px，标题就会更改。问题是，如果您正在滚动，这将无法运行。直到滚动条停止（在按住或放开时）它才会更新

即使滚动条处于运动状态，如何更新？

额外的JSFiddle：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>

Jquery在滚动时更新滚动位置，而不是在滚动完成时更新

0 个答案: