Question

我的导航栏固定在窗口右侧。但是，如果窗口调整大小小于某个大小，我希望它停止移动，如果窗口调整大小大于此大小，则将其自身重新连接到右侧。

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

此外，效果不是很流畅，而且非常刺耳。

非常感谢任何其他解决方案或想法！

$(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/

Answer 2

使用绝对定位而不是固定定位。放置一个相对定位的包装div然后给它最小宽度值。将导航栏放在包装器内，绝对定位..

Answer 3

一旦你指定它们，就会保持左右两个距离设置正确的距离时，将其设置为自动，它应该可以正常工作

 if (windowWidth < 1200) {
    $('#test').css('left', '1100px');
  }
  else {
    $('#test').css('right', '55px');
    $('#test').css('left', 'auto');
  }

编辑（由匿名用户添加。）

Stratton是完全正确的，您为“left”分配一个值，并且永远不会将其重新分配给auto。如果你在else语句中执行它，你将使它工作。尝试使用这个代码，你会产生一种效果，就像它只是移动了一些点。

$(window).resize(function(){
  var windowWidth = $(window).width();
  $("#test").html(windowWidth);//Just to see in real time what's the window with
  if (windowWidth < 1200) {
    $('#test').css('left', '1020px');
  }
  else {
    $('#test').css('right', '50px');
    $('#test').css('left', 'auto');
  }
});

关于性能，取决于您使用的很多计算机和浏览器，例如我计算机上的chrome看起来很棒，但不是在Opera中。这可能是因为（例如）Opera仅在您停止调整事件时才触发事件（this article稍微解释一下）。

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

3 个答案: