javascript - 如果屏幕尺寸大于 X，则运行脚本

Question

我有一个代码，如果屏幕尺寸超过 1024px，我需要运行它，但它不起作用......它有什么问题？

if($(window).width() >= 1024){
    var targetOffset = $("#section--4").offset().top;

        var $w = $(window).scroll(function() {
            if ( $w.scrollTop() + 200 > targetOffset ) {   
                $("#logo").fadeIn(500);
                $("#logo2").fadeOut('slow');
                $("header").css({"overflow": "hidden"});
            } else {
                $("#logo2").fadeIn(2000)
                $("#logo").fadeOut('fast');
                $("header").css({"overflow": "visible"});
            }
   }
});

Answer 1

$(window).resize(function(){
 if($(window).width() >= 1024){
    var targetOffset = $("#section--4").offset().top;
    var $w = $(window).scroll(function() {
        if ( $w.scrollTop() + 200 > targetOffset ) {   
            $("#logo").fadeIn(500);
            $("#logo2").fadeOut('slow');
            $("header").css({"overflow": "hidden"});
        } else {
            $("#logo2").fadeIn(2000)
            $("#logo").fadeOut('fast');
            $("header").css({"overflow": "visible"});
        }
      });
   }
});

不调整大小

 if($(window).width() >= 1024){
    var targetOffset = $("#section--4").offset().top;
    var $w = $(window).scroll(function() {
        if ( $w.scrollTop() + 200 > targetOffset ) {   
            $("#logo").fadeIn(500);
            $("#logo2").fadeOut('slow');
            $("header").css({"overflow": "hidden"});
        } else {
            $("#logo2").fadeIn(2000)
            $("#logo").fadeOut('fast');
            $("header").css({"overflow": "visible"});
        }
      });
   }