Question

您好我有一个检查宽度函数，用于检查屏幕的宽度，然后执行滚动功能。

以下是代码：

jQuery(window).on('resize', checkWidthStickyHeader);
function checkWidthStickyHeader() {
    if (jQuery(window).width() > 1350) {
        jQuery(window).scroll(function () {
            if (jQuery(window).scrollTop() > 50) {
                jQuery('.header-top').addClass('header-top-active');
            }
            else {
                jQuery('.header-top').removeClass('header-top-active');
            }
        });
    } else {

    }
}
checkWidthStickyHeader();

基本上这就是说，如果浏览器高于1350px，那么预先形成一个滚动功能。如果它小于1350px则不做任何事。

这样可行，但您必须刷新页面才能再次检查窗口的宽度。

要让它检查调整大小的宽度，我在顶部jQuery(window).on('resize', checkWidthStickyHeader);

添加了该内容

这似乎有效，因为我在底部的else语句中执行了console.log测试，并且每次调整窗口大小时都会触发。

但问题是，当你开始屏幕宽度大于1350px并将其缩小到低于该值时，滚动功能仍会触发。我不确定为什么会这样做。

有人可以帮忙吗？

谢谢！

Answer 1

您必须取消注册scrollHandler或检查滚动功能内的宽度。

Example: Register/unregister scroll
jQuery(window).on('resize', checkWidthStickyHeader);


    function addStickyness(){
                    if (jQuery(window).scrollTop() > 50) {
                        jQuery('.header-top').addClass('header-top-active');
                    }
                    else {
                        jQuery('.header-top').removeClass('header-top-active');
                    }
        }

    function checkWidthStickyHeader() {
        if (jQuery(window).width() > 1350) {
            jQuery(window).on('scroll',addStickyness);
        } else {
            jQuery(window).off('scroll', addStickyness)
        }
    }
    checkWidthStickyHeader();

调整大小和滚动功能（jQuery）调整大小功能

1 个答案: