改变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，根据屏幕尺寸

回答

相关问题