只触发jquery某个屏幕最小宽度

Question

我有这个代码

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

我希望它只适用于特定的屏幕宽度，基本上是最小宽度我尝试在代码的不同部分添加一行以下内容，但不起作用。我不是javascript专家，我现在正在学习。我的PHP概念在这里不起作用。

if ($(window).width() >= 1024) {
}

我已尝试添加

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

}

Answer 1

您需要检查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);
    });
});

还要注意toggleClass()与基于scroll位置的布尔参数的简化使用。

Answer 2

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

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