在滚动时更改 css，具体取决于屏幕大小答案

【问题标题】：change css on scroll, depending on screen size在滚动时更改 css，具体取决于屏幕大小
【发布时间】：2016-01-17 21:16:13
【问题描述】：

所以我使用这个 JQuery 在滚动时更改标题中的元素。是否有可能只根据屏幕尺寸发生这些变化？

代码：

     $(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', '');

    }
});

谢谢！

【问题讨论】：

是的，您可以通过视口大小制作任何 jquery 条件。但是你的问题是什么？
我使用引导程序使我的网站具有响应性。我使用此代码使我的“固定”标题在 400 像素以下的屏幕上更小。但是使用此代码，它也会影响其他屏幕尺寸。我对Jquery不太了解，如何添加这样的条件？谢谢你的回复
由于某种原因，我无法回答我自己的问题。无论如何，我找到了您所说的条件：if ( $(window).width()
是的，您可以使用$(window).width() 和$(window).height() 来获取视口高度宽度。

标签： jquery html css scroll

【解决方案1】：

获取视口的宽度和高度：

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

页面大小调整事件：

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

【讨论】：

【解决方案2】：

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
}
});

这对于性能来说不是非常理想，但应该可以完成这项工作。如果需要，您可以将其包装在文档就绪函数中。

【讨论】：