改變CSS，根據屏幕尺寸

所以我使用這個jQuery來改變我的滾動頭元素。是否有可能根據屏幕尺寸發生這些更改？改變CSS，根據屏幕尺寸

代碼：

 $(window).scroll(function() { 

    //After scrolling 100px from the top... 
    if ($(window).scrollTop() >= 10) { 
     $('#scrollthing').css('display', 'none'); 
     $('#ticket-amount').css('margin-bottom', '15px'); 

    //Otherwise remove inline styles and thereby revert to original stying 
    } else { 
     $('#scrollthing').attr('style', ''); 

    } 
});

謝謝！

來源

2016-01-17 peter vries

是的，你可以通過視口大小的任何jQuery的條件。但是你在這裏遇到什麼問題？ –

我使自己的網站響應自舉。我使用此代碼在400px以下的屏幕上使我的「固定」標題更小。但是使用這個代碼，它也會影響其他屏幕尺寸。我對Jquery瞭解不多，我將如何添加這樣一個條件？謝謝你的回覆 –

由於某些原因，我無法回答我自己的問題。無論如何，我發現你談論的條件：if（$（window）.width（）<405）{ –

爲了得到視的寬度和高度：頁面

var viewportWidth = $(window).width(); 
var viewportHeight = $(window).height();

resize事件：

$(window).resize(function() { 
     //do your check here on resize 
     if($(window).width() < 405) 
     //do here 
});

來源

2016-01-17 13:07:47

Here you go. 




$(window).scroll(function() { 
// checking the condition 
if ($(window).width() < 400 && $(window).scrollTop() >= 10) { 
// set your changes here 
} 
else { 
// else condition for when the if condition does not apply 
} 
});

這不是性能非常最優的，但是應該做的工作。如果你願意，你可以把它包裝在一個文檔就緒函數中。

來源

2016-01-17 13:16:13

改變CSS，根據屏幕尺寸

回答

相關問題