根据屏幕大小更改滚动上的css

Question

因此，我使用这个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', '');

    }
});

谢谢!

Answer 1

获取视图的宽度和高度

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

调整页的大小事件：

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

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

这对于性能来说并不是很理想，但是应该做好这项工作。如果需要，可以将其包装到文档就绪函数中。