运行屏幕尺寸大于 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"});
        }
      });
   }

Answer 2

你只需要这个

$(window).on('resize', handler )

这是一个简单的例子。单击代码底部的完整页面 link，然后调整浏览器大小，当浏览器宽度小于 500 时，该框会淡出。

$(document).ready(function(){

$(window).on('resize', function(){

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

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

});

});

#logo{
width:60px;
height:60px;
background:pink;
position:fixed;
}

#logo2{
width:60px;
height:60px;
background:yellow;
position:fixed;
}

#section--4{
width:60px;
height:60px;
background:green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
<div id="logo">logo</div><br />
<div id="logo2">logo2</div>
<div id="section--4">section--4</div>
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br />
<div></div>
</body>

Answer 3

简单的解决方案如下：

使用$(document).ready在页面加载后执行一段代码。

将您已有的代码包装在一个函数中（假设我们将该函数命名为 func 作为示例）。

执行以下操作：

$(document).ready(function(){
  func();
  $("window").on('resize', func);
});

这段代码在页面加载时执行函数 func，并将事件侦听器附加到 window 对象的调整大小事件，并在 [=16] 时调用 func =] 事件在 window 对象上触发。

运行屏幕尺寸大于 X 时的脚本

Run script if screen size is more than X

html

javascript

jquery

window

运行 屏幕尺寸大于 X 时的脚本

Run script if screen size is more than X

html

javascript

jquery

window

运行屏幕尺寸大于 X 时的脚本