如何禁用窗口寬度<500像素

這個jQuery功能我已經使用的添加和移除類功能我的標誌，如何禁用窗口寬度<500像素

我想在窗口寬度< 500px的禁用該功能，

這裏是腳本我用過。

$(document).on('scroll', function() { 
    if ($(this).scrollTop() > 50) { 
     $('header').addClass('sticky'); 
     $('#logo').addClass('none'); 
     $('#logo-black').removeClass('none'); 
    } else { 
     $('header').removeClass('sticky'); 
       $('#logo').removeClass('none'); 
     $('#logo-black').addClass('none'); 
    } 
});

來源

2016-11-07 ubakara samy

只需檢查處理程序中的窗口寬度。

$(document).on('scroll', function() { 
    if($(window).width() >= 500){ 
    if ($(this).scrollTop() > 50) { 
     $('header').addClass('sticky'); 
     $('#logo').addClass('none'); 
     $('#logo-black').removeClass('none'); 
    } else { 
     $('header').removeClass('sticky'); 
     $('#logo').removeClass('none'); 
     $('#logo-black').addClass('none'); 
    } 
    } 
});

來源

2016-11-07 05:50:27

使用window.innerWidth來計算窗口的寬度，不包括工具欄和滾動條。

$(document).on('scroll', function() { 

    if (window.innerWidth < 500) return; // Use this 

    if ($(this).scrollTop() > 50) { 
     $('header').addClass('sticky'); 
     $('#logo').addClass('none'); 
     $('#logo-black').removeClass('none'); 
    } else { 
     $('header').removeClass('sticky'); 
       $('#logo').removeClass('none'); 
     $('#logo-black').addClass('none'); 
    } 
});

來源

2016-11-07 05:50:37 void

'window.innerWidth'不排除垂直滾動條（如果存在），但是不包含「document.documentElement.clientWidth」。 – Flyer53

你可以把一個條件

if($(window).width() > 500) { 
    $(document).on('scroll', function() { 
     if ($(this).scrollTop() > 50) { 
      $('header').addClass('sticky'); 
      $('#logo').addClass('none'); 
      $('#logo-black').removeClass('none'); 
     } else { 
      $('header').removeClass('sticky'); 
      $('#logo').removeClass('none'); 
      $('#logo-black').addClass('none'); 
     } 
    }); 
}

來源

2016-11-07 05:51:22

爲什麼要使用JavaScript時，這是可能的CSS。我假設你正在尋找固定標題。我們只能通過使用媒體查詢來處理這個問題。看看這個。

.header{ 
 
    position:fixed; 
 
    left:0; 
 
    right:0; 
 
    height:50px; 
 
    background:red; 
 
} 
 
body{ 
 
    height:1000px; 
 
    width:100%; 
 
    margin:0 
 
} 
 
@media only screen and (max-width: 500px) { 
 
    .header{ 
 
    position:relative; 
 
    } 
 
}

<div class="header"> 
 
    sticky header 
 
</div>

如果你是對的javascript真正感興趣的然後就檢查在這樣的調整窗口的大小寬度。

$(window).resize(function(){ 
    if($(window).width() > 500){ 
     //code goes here 
    } 
});

來源

2016-11-07 05:57:55

如何禁用窗口寬度<500像素

回答

相關問題