jquery - 有没有办法让固定位置的元素在窗口大小调整一定量后停止移动？

Question

我有一个固定位置在窗口右侧的导航栏。但是，如果窗口大小调整为小于某个大小，我希望它停止移动，然后如果窗口大小调整为大于此大小，则将其重新附加到右侧。

我正在尝试使用 jquery 和 $(window).resize，并且能够在某个点之后阻止元素向内移动，但如果窗口缩放得更大，它不会重新附加。

此外，效果不是很流畅，而且相当刺耳。

任何其他解决方案或想法将不胜感激!

http://jsbin.com/azanif/5

$(window).resize(function(){
  var windowWidth = $(window).width();
  if (windowWidth < 1200) {
    $('#test').css('left', '1100px');
  }
  else {
    $('#test').css('right', '55px');
  }
});

Answer 1

对于此类功能，您可以使用媒体查询

这样写:

@media all and (max-width: 699px) and (min-width: 520px), (min-width: 1100px) {
  #test {
    left:600px;
  }
}

详细阅读这些文章

http://css-tricks.com/6731-css-media-queries/ ,

http://css-tricks.com/6206-resolution-specific-stylesheets/