如果屏幕尺寸大於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 )

這是一個簡單的例子。 單擊代碼底部的整頁鏈接，然后調整瀏覽器的大小，以查看當瀏覽器的寬度小於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事件，並在window對象上觸發resize事件時將調用func 。

如果屏幕尺寸大於X，則運行腳本

問題描述

3 個解決方案

解決方案1
1 已采納 2017-06-16 11:39:53

解決方案2
1 2017-06-16 11:55:35

解決方案3
0 2017-06-16 13:25:57

如果屏幕尺寸大於X，則運行腳本

問題描述

3 個解決方案

解決方案1 1 已采納 2017-06-16 11:39:53

解決方案2 1 2017-06-16 11:55:35

解決方案3 0 2017-06-16 13:25:57

解決方案1
1 已采納 2017-06-16 11:39:53

解決方案2
1 2017-06-16 11:55:35

解決方案3
0 2017-06-16 13:25:57