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 )

这是一个简单的例子。单击代码底部的完整页面链接，然后调整浏览器的大小，以便在浏览器宽度小于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对象的resize事件，并在func时调用resize在window对象上触发事件。

如果屏幕大小超过X，请运行脚本

3 个答案: