滚动过去 x-px 时删除类（从底部）

Question

我有以下 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>

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

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

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"); 
            }
        });

两个代码都没有做我想让他们做的事情。 任何人都可以帮助我正确的代码或指出我正确的方向吗？ 谢谢。

Answer 1

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

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");
        }
    });
});

Answer 2

您的代码中有一些语法错误。

这是一个快速演示，展示了它现在可以正常工作：

http://codepen.io/paulcredmond/pen/jrzdxJ?editors=1111

$(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");
        }    

    });
});

Answer 3

window.onscroll = function () { scrollFunction() };
function scrollFunction() {
  if (document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
    document.querySelector(".fixed-top").classList.add("headerFix");
  } else {
    document.querySelector(".fixed-top").classList.remove("headerFix");
  }
}