触发器jquery仅适用于特定的屏幕最小宽度

我有这个密码

jQuery(document).ready(function($) {
    $(window).scroll(function() {    
        var scroll = $(window).scrollTop();

        if (scroll >= 100) {
            $("#inslist").addClass("fadeoutnow");
        }

        if (scroll <= 100) {
            $("#inslist").removeClass("fadeoutnow");
        }

        if (scroll >= 315) {
            $(".page-id-556 .vc_col-sm-4").addClass("floatcontact");
        }

        if (scroll <= 315) {
            $(".page-id-556 .vc_col-sm-4").removeClass("floatcontact");
        }
    });
});

我试图补充一点

if (scroll >= 315) & ((window).width() >= 1024){ {
$(".page-id-556 .vc_col-sm-4").addClass("floatcontact");

---

}

您需要在

resize（）

事件中检查窗口宽度，否则布局将仅反映加载时的宽度。试试这个：

jQuery(document).ready(function($) {
    $(window).on('scroll resize', function() {
        var $win = $(window);
        var scroll = $win.scrollTop();
        var winWidth = $win.width();

        if (winWidth <= 1024)
            return;

        $("#inslist").toggleClass("fadeoutnow", scroll >= 100);
        $(".page-id-556 .vc_col-sm-4").toggleClass("floatcontact", scroll >= 315);
    });
});

jQuery（文档）.ready（函数（$）{
$（窗口）.on（'scroll resize'，function（））{
var$win=$（窗口）；
var scroll=$win.scrollTop（）；
var winWidth=$win.width（）；
如果（winWidth=100）；
$（.page-id-556.vc_col-sm-4”）.toggleClass（“floatcontact”，滚动>=315）；
});
});

---

另请注意，基于

滚动

位置的布尔参数简化了

切换类（）

的使用。

您可以将代码绑定到窗口的调整大小事件：

    function activate() {
            var scroll = $(window).scrollTop();

            if (scroll >= 100) {
                $("#inslist").addClass("fadeoutnow");
            }

            if (scroll <= 100) {
                $("#inslist").removeClass("fadeoutnow");
            }

            if (scroll >= 315) {
                $(".page-id-556 .vc_col-sm-4").addClass("floatcontact");
            }

            if (scroll <= 315) {
                $(".page-id-556 .vc_col-sm-4").removeClass("floatcontact");
            }
     }


jQuery(document).ready(function($) {
   $(window).on('resize scroll', function(){
      if ($(window).width() >= 1024)
         activate()
   }
});

函数激活（）{
var scroll=$（窗口）.scrollTop（）；
如果（滚动>=100）{
$（“#inslist”）.addClass（“淡出状态”）；
}
如果（滚动=315）{
$（“.page-id-556.vc_col-sm-4”）.addClass（“浮动联系人”）；
}
如果（滚动=1024）
激活（）
}
});

首先，您的脚本工作正常吗（不考虑设备宽度）？如果页面开始>1024，但大小调整为更小，会发生什么情况？；）然后您需要编写一个“禁用”函数；）它工作得很好。我现在将学习代码，以便能够在其他情况下使用此解决方案。如果你能为我指出更多的参考网站/阅读资料，我将不胜感激。非常感谢。我今天学到了很多。很高兴能帮忙。如果您指的是jQuery，那么文档是最佳参考：。如果您指的是JS本身，请尝试MDN：

    function activate() {
            var scroll = $(window).scrollTop();

            if (scroll >= 100) {
                $("#inslist").addClass("fadeoutnow");
            }

            if (scroll <= 100) {
                $("#inslist").removeClass("fadeoutnow");
            }

            if (scroll >= 315) {
                $(".page-id-556 .vc_col-sm-4").addClass("floatcontact");
            }

            if (scroll <= 315) {
                $(".page-id-556 .vc_col-sm-4").removeClass("floatcontact");
            }
     }


jQuery(document).ready(function($) {
   $(window).on('resize scroll', function(){
      if ($(window).width() >= 1024)
         activate()
   }
});