javascript - 滚动超过x-px时删除类(从底部开始)

我有以下jQuery脚本，当它滚动到页面上的某个点时，它将向元素添加一个类。

jQuery(document).ready(function($) {
        var s = $("#sticker");
        var pos = s.position();
        $(window).scroll(function() {
            var windowpos = $(window).scrollTop();
            if (windowpos >= pos.top + 380) {
                s.addClass("stick");
            } else {
                s.removeClass("stick");
            }
        });

这是HTML部分。

<div id="sticker">
    <div class="widget">
        <?php dynamic_sidebar( 'widget-area-2' ); ?>
    </div>
    <h3>Uw voordelen</h3>
        <ul class="ClassName">
            <li><strong style="vertical-align:top; margin-bottom:0px">Something A</strong>
                <div class="submenu">Some text A</div>
            </li>
            <li><strong style="vertical-align:top; margin-bottom:0px">Something B</strong>
                <div class="submenu">Some text B</div>
            </li>
            <li><strong style="vertical-align:top; margin-bottom:0px">Something C</strong>
                <div class="submenu">Some text C</div>
            </li>
        </ul>
</div>

现在发生的情况是，添加类#sticker时，div .stick高于页脚元素。这导致内容在页脚元素上滑动，这是我不希望的。

因此，当您向下滚动页面上的x像素时，我想解决的方法是在removeClass类上的stick。所以我尝试了以下代码：

jQuery(document).ready(function($) {
        var s = $("#sticker");
        var pos = s.position();
        $(window).scroll(function() {
            var windowpos = $(window).scrollTop();
            if (windowpos >= pos.top + 380) {
                s.addClass("stick");
            } if (windowpos >= pos.top + 900) {
                s.removeClass("stick");
            } else {
                s.removeClass("stick");
            }
        });

但是，不行，然后我在此页面上发现了一个类似的问题，但这并不是我要找的东西。但是我将其添加到了代码中，如下所示：

jQuery(document).ready(function($) {
        var s = $("#sticker");
        var pos = s.position();
        $(window).scroll(function() {
            var windowpos = $(window).scrollTop();
            if (windowpos >= pos.top + 380) {
                s.addClass("stick");
            } else if (windowpos >= pos.top + 900) {
                s.removeClass("stick");
            } else {
                s.removeClass("stick");
            }
        });

两种代码都没有执行我希望它们执行的操作。有人可以帮助我提供正确的代码或为我指明正确的方向吗？谢谢。

最佳答案

如果条件的顺序错误。您应该使用：

jQuery(document).ready(function($) {
    var s = $("#sticker");
    var pos = s.position();
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        if (windowpos >= pos.top + 900) {
            s.removeClass("stick");
        } else if (windowpos >= pos.top + 380) {
            s.addClass("stick");
        } else {
            s.removeClass("stick");
        }
    });
});

甚至更好：

jQuery(document).ready(function($) {
    var s = $("#sticker");
    var pos = s.position();
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        if (windowpos >= pos.top + 380 && windowpos < pos.top + 900) {
            s.addClass("stick");
        } else {
            s.removeClass("stick");
        }
    });
});