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

您可以将代码绑定到窗口的resize事件：

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

触发jquery只有一定的屏幕最小宽度

2 个答案: