javascript 如果窗口大小发生变化，移动 div 固定位置
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13957249/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Move div with fixed position if window size changes
提问by roman
How can i do the following: I need a div to change it's position when the page is opened on a narrow screen or browser window size is changed. The fixed div should stay on the same vertical position when the page is scrolled up or down, but i also need it to be lets say 10px away from the largest div(a container for smaller divs, see the picture please). Now when i resize the window the fixed div comes over the div to the right.
我该怎么做：当页面在窄屏幕上打开或浏览器窗口大小改变时，我需要一个 div 来改变它的位置。当页面向上或向下滚动时，固定的 div 应该保持在相同的垂直位置，但我也需要它离最大的 div 10px（用于较小 div 的容器，请参见图片）。现在，当我调整窗口大小时，固定的 div 越过右侧的 div。
So the question is how can i make this fixed div stay on the same position when scrolling the page vertically and make it always be 10px away from the right div? Css class for fixed is:
所以问题是我怎样才能让这个固定的 div 在垂直滚动页面时保持在相同的位置，并使它始终与正确的 div 保持 10px 的距离？固定的 CSS 类是：
.fixed{
width:40px;
height:40px;
position:fixed;
bottom:100px;
left:100px;
text-indent:-9999px;
}
In fact i'm trying to implement a "back to top" button, so the fixed div is this button and the largest div is page's content.
事实上，我正在尝试实现一个“返回顶部”按钮，所以固定的 div 就是这个按钮，最大的 div 是页面的内容。
Here is what i have now:
这是我现在所拥有的：
采纳答案by anacarolinats
change your css to make it look like this:
更改您的 css 使其看起来像这样：
.fixed{
width:40px;
height:40px;
position:fixed;
bottom:100px;
left:50%;
margin-left: -[(maincontainerwidth/2) + 50];
text-indent:-9999px;
}
回答by Anicho
Two ways I would do it:
我会用两种方式来做到这一点：
1) custom javascript that reads the width of window and changes your css
1）读取窗口宽度并更改您的css的自定义javascript
2) or using a library like adapt.js to detect and swap between .css
2) 或者使用像adapt.js 这样的库来检测和交换.css
Key term: Responsive Web Design
关键词：响应式网页设计
Take a look at adapt.jsits a javascript library that will load different css files based on page window size. This technique is great if you want to display things different between lets say mobile and desktop screen.
看看adapt.js，它是一个javascript 库，它会根据页面窗口大小加载不同的css 文件。如果您想在移动屏幕和桌面屏幕之间显示不同的内容，则此技术非常有用。
In your scenario this would potentially work also.
在您的场景中，这也可能有效。
1) Reference adapt.js
1）参考adapt.js
<script src="/js/adapt.js" type="text/javascript></script>
2) Configure
2) 配置
So essentially you'd have two views:
所以基本上你会有两种观点：
// Edit to suit your needs.
var ADAPT_CONFIG = {
// Where is your CSS?
path: 'assets/css/',
// false = Only run once, when page first loads.
// true = Change on window resize and page tilt.
dynamic: true,
// Optional callback... myCallback(i, width)
callback: myCallback,
// First range entry is the minimum.
// Last range entry is the maximum.
// Separate ranges by "to" keyword.
range: [
'0px to 760px = Narrow.css', // css for narrow views
'760px to 980px = Narrow.css',
'980px to 1280px = Wide.css', // css for wide views
'1280px to 1600px = Wide.css',
'1600px to 1920px = Wide.css',
'1940px to 2540px = Wide.css',
'2540px = Wide.css'
]
};
3) Altogether would look like
3）总而言之
<html>
<head>
...
<script src="/js/adapt.js" type="text/javascript></script>
<script type="text/javascript>
// Edit to suit your needs.
var ADAPT_CONFIG = {
// Where is your CSS?
path: 'assets/css/',
// false = Only run once, when page first loads.
// true = Change on window resize and page tilt.
dynamic: true,
// Optional callback... myCallback(i, width)
callback: myCallback,
// First range entry is the minimum.
// Last range entry is the maximum.
// Separate ranges by "to" keyword.
range: [
'0px to 760px = Narrow.css', // css for narrow views
'760px to 980px = Narrow.css',
'980px to 1280px = Wide.css', // css for wide views
'1280px to 1600px = Wide.css',
'1600px to 1920px = Wide.css',
'1940px to 2540px = Wide.css',
'2540px = Wide.css'
]
};
</script>
...
</head>
<body>
...
</body>
</html>
回答by Praveen Kumar Purushothaman
Wrapper!
包装！
I guess the best way to control this is by using a wrapper div. So, have something like this:
我想最好的控制方法是使用 wrapper div。所以，有这样的事情：
<div class="wrap">
<!-- Contents -->
<div class="fixed">
</div>
</div>
Now add with the CSS:
现在添加 CSS：
.wrap {width: [fixed width]; position: relative;}
.fixed {left: -100px;}
I feel the wrapper divis not necessary as the bodyitself is relatively positioned. Using this method, the divstays in the same position.
我觉得包装器div不是必需的，因为它body本身是relatively positioned。使用这种方法，div保持在相同的位置。
