Question

我试图在用户滚动到某个点时向元素添加class，然后在元素的底部经过另一个点时删除相同的class页。

我已经让第一部分工作了（当scrollTop大于另一个元素的顶部位置时添加课程）但是我在进一步删除课程时遇到问题 - 我可以成功删除该类，但随后我的功能在滚动时发生，它不断检查定位，这意味着功能有点乱，在每个滚动上添加/删除class。

请在下面找到我的JS和JSFiddle链接：

var top = jQuery(".lineTop").offset().top;

var lineTopTop = top + jQuery(".lineTop").height();

jQuery(window).on("scroll", function () {

    var stickablePosition = jQuery(".stickable").offset().top + jQuery(".stickable").height();

    if (jQuery(window).scrollTop() > top ) {

        jQuery(".stickable").addClass("sticky");

        if ( stickablePosition > lineTopTop ) {
            jQuery(".stickable").removeClass("sticky");
        };

    } else if ( top > jQuery(window).scrollTop() ) {
        jQuery(".stickable").removeClass("sticky");

    };

});

到目前为止我的工作是：http://jsfiddle.net/nimaek/0wefgutq/9/

如何将sticky类推到stickable底部低于lineTop的底部？

感谢。

Answer 1

也许你正在寻找一个deboucer。此功能允许您在滚动事件上执行一次该功能，而不是在每个滚动中执行大量执行。你可以使用David Walsh的debouce函数：

    function debounce(func, wait, immediate) {
        var timeout;
        return function() {
            var context = this, args = arguments;
            var later = function() {
                timeout = null;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);
            if (callNow) func.apply(context, args);
        };
    };

使用：

    var myEfficientFn = debounce(function() {
        // All the taxing stuff you do
    }, 250);

    window.addEventListener('resize', myEfficientFn);

更多信息：

http://davidwalsh.name/javascript-debounce-function

Answer 2

我想我已经解决了。我刚刚在if语句中移动了我的stickablePosition变量。

jQuery(window).on("scroll", function () {

    if (jQuery(window).scrollTop() > top ) {

        jQuery(".stickable").addClass("sticky");

    var stickablePosition = jQuery(".stickable").offset().top + jQuery(".stickable").height();

        if ( stickablePosition > lineTopTop ) {
            jQuery(".stickable").removeClass("sticky");
        };

    } else if ( top > jQuery(window).scrollTop() ) {
        jQuery(".stickable").removeClass("sticky");

    };

});

更新版本位于：http://jsfiddle.net/nimaek/0wefgutq/10/

当元素的底部经过点时删除类

2 个答案: