問題與if語句 - 屏幕寬度

Question

我有以下代碼：

$(window).on("load resize", 
    function(){ 

    stickerHeight = $('#sticker').height(); 

    if ($(window).width() > 480) { 

    var stickerTop = parseInt($('#sticker').offset().top); 
     $(window).scroll(function() { 
      $("#sticker").css((parseInt($(window).scrollTop()) + parseInt($("#sticker").css('margin-top')) > stickerTop) ? { 
       position: 'fixed', 
       top: '0px' 
      } : { 
       position: 'relative' 
      }); 
      if ($('#sticker').css('position') === 'fixed') { 
      $('#page').css('padding-top',stickerHeight + 20);} 
      else {$('#page').css('padding-top','20px');} 
     }); 
    } 

    else {$('#page').css('padding-top','20px');} 

    }); 

我試圖讓#page的填充被固定在20像素的屏幕是否小於480像素寬。如果頁面遠不只這一點，我希望它運行的代碼的這一部分：

var stickerTop = parseInt($('#sticker').offset().top); 
      $(window).scroll(function() { 
       $("#sticker").css((parseInt($(window).scrollTop()) + parseInt($("#sticker").css('margin-top')) > stickerTop) ? { 
        position: 'fixed', 
        top: '0px' 
       } : { 
        position: 'relative' 
       }); 
       if ($('#sticker').css('position') === 'fixed') { 
       $('#page').css('padding-top',stickerHeight + 20);} 
       else {$('#page').css('padding-top','20px');} 
      }); 

但由於某些原因正在運行的代碼所有的時間，並影響#page的填充頂值即使屏幕小於480像素。我已經選擇了大約一個小時的代碼，它使我瘋狂，任何我錯誤的指針都會很棒，謝謝。這裏

Answer 1

同樣的建議：window.scroll events triggering twice

使用超時，以防止發生性能問題：

var timeout; 

$(window).scroll(function() { 
    clearTimeout(timeout); 
    timeout = setTimeout(function() { 
     // do your stuff 
    }, 50); 
}); 

做同樣的事情調整！

Answer 2

我好不容易纔達到什麼我打算爲通過完全刪除if語句，並使用CSS媒體查詢，以使#sticker高度爲0px低於480px屏幕寬度：

的CSS：

@media only screen and (max-width: 480px) { 
#sticker { 
     height:0; 
     overflow:hidden; 
    } 
} 

jQuery的：

$(window).on("load resize", 
    function(){ 

    stickerHeight = $('#sticker').height(); 

    var stickerTop = parseInt($('#sticker').offset().top); 
     $(window).scroll(function hello() { 
      $("#sticker").css((parseInt($(window).scrollTop()) + parseInt($("#sticker").css('margin-top')) > stickerTop) ? { 
       position: 'fixed', 
       top: '0px' 
      } : { 
       position: 'relative' 
      }); 
      if ($('#sticker').css('position') === 'fixed') { 
      $('#page').css('padding-top',stickerHeight + 20);} 
      else {$('#page').css('padding-top','20px');} 
     }); 

    });