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

发布于 2024-12-15 11:24:52 字数 526 浏览 1 评论 0原文

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

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

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

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

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

原文

I have a navigation bar that is fixed-position to the right side of the window. However, I want it to stop moving if the window is resized smaller than a certain size, and then reattach itself to the right side if the window is resized larger than this size.

I am trying to use jquery and $(window).resize and am able to stop the element from moving inwards after a certain point, but it does not reattach if the window is scaled larger.

Also, the effect is not very fluid and is rather jarring.

Any other solutions or ideas would be greatly appreciated!

http://jsbin.com/azanif/5

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

醉酒的小男人 2024-12-22 11:24:52

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

编写，如下所示：

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

For this type of functionality you can use Media Query

write like:

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

Read these article more

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

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

回复收藏 0 原文

指尖上得阳光 2024-12-22 11:24:52

一旦您分配了左右距离，它就会保留它们。
当您设置正确的距离时，将 left 设置为 auto，它应该可以

 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 仅当您停止调整事件大小时才会触发该事件 (这篇文章对此进行了一些解释）。

It keeps both distances, left and right once you've assigned them.
Set left to auto when you set the right distance and it should work

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

EDIT (Addition by anonymous user.)

Stratton is completely right, you assign a value to "left" and never reassign it to auto. if you do it on else statement, you will have it working. Try with this code, and you'll have an effect like it's only moving passed some point.

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

About performance, depends a lot of the computer and browser you use, for example on chrome in my computer looks great, but not in opera. That could be because (for example) Opera fires the event only when you stop resizing it (this article explains it a little bit).

回复收藏 0 原文