Question

我使用debounce script作为条件的一部分，当用户滚动页面超过一定数量的像素然后隐藏菜单时，会在侧边菜单中添加一些css从底部设置像素数量。该脚本适用于992px及以上的屏幕宽度（根据条件if (debounce_bodyWidth >= 992)），但它仍然在低于此值的维度上执行。

是否存在$(window).scroll的某些内容，这意味着它的执行与条件无关？

(function ($) {
    contactDebounce = function () {
        var debounce_bodyWidth = $(window).width();
        if (debounce_bodyWidth >= 992) {
            $(window).scroll(function () {
                var distanceFromBottom = $(document).height() - $(this).scrollTop();

                if (distanceFromBottom <= 1200) {
                    $('.sticky-element').addClass('hide');
                } else if ($(this).scrollTop() >= 150) {
                    $('.sticky-element').removeClass('hide');
                    $('.sticky-element').css({
                        'position': 'fixed',
                        'top': '15px'
                    });
                } else if ($(this).scrollTop() < 150) {
                    $('.sticky-element').css({
                        'position': 'relative',
                        'top': '0'
                    });
                }
            });
        }
    }
    contactDebounce();
    $(window).on("debouncedresize", contactDebounce);
})(jQuery);

Answer 1

如果$(window).scroll，这个条件永远不再运行，那么你正在做的是将一个函数绑定到页面加载上的bodyWidth >= 992，因为在滚动上运行的所有内容都在滚动函数中已经创造出来了。

编辑：评论中已经指出，这是在去抖动调整大小时再次运行。那么问题是当条件为真时已经设置了滚动函数，而当条件变为假时没有取消设置。您可以取消设置事件并再次检查调整大小或在事件中添加条件并停止运行调整大小的检查。

试试这个，在事件中添加条件：

(function ($) {
    contactDebounce = function () {
        $(window).scroll(function () {

            var debounce_bodyWidth = $(window).width();
            if (debounce_bodyWidth >= 992) {
                var distanceFromBottom = $(document).height() - $(this).scrollTop();
                var stickyElement = $('.sticky-element');

                if (distanceFromBottom <= 1200) {
                    stickyElement.addClass('hide');
                } else if ($(this).scrollTop() >= 150) {
                    stickyElement.removeClass('hide');
                    stickyElement.css({
                        'position': 'fixed',
                        'top': '15px'
                    });
                } else if ($(this).scrollTop() < 150) {
                    stickyElement.css({
                        'position': 'relative',
                        'top': '0'
                    });
                }
            }
        });
    }

    contactDebounce();
})(jQuery);

或者这个，小的时候解开，大的时候重新绑定：

(function ($) {
    contactDebounce = function () {
        var debounce_bodyWidth = $(window).width();
        if (debounce_bodyWidth >= 992) {
            $(window).scroll(function () {
                var distanceFromBottom = $(document).height() - $(this).scrollTop();
                var stickyElement = $('.sticky-element');
                if (distanceFromBottom <= 1200) {
                    stickyElement.addClass('hide');
                } else if ($(this).scrollTop() >= 150) {
                    stickyElement.removeClass('hide');
                    stickyElement.css({
                        'position': 'fixed',
                        'top': '15px'
                    });
                } else if ($(this).scrollTop() < 150) {
                    stickyElement.css({
                        'position': 'relative',
                        'top': '0'
                    });
                }
            });
        }
        else
        {
            $(window).unbind('scroll');
        }
    }

    contactDebounce();
    $(window).on("debouncedresize", contactDebounce);
})(jQuery);

$（window）.scroll在if语句中执行即使它不满足条件

1 个答案: