如果窗口大小改变，则移动固定位置的div

Question

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. 如何执行以下操作：在狭窄的屏幕上打开页面或更改浏览器窗口大小时，我需要一个div来更改它的位置。 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). 当页面向上或向下滚动时，固定div应该保持在相同的垂直位置，但我还需要它可以说距离最大的div（一个容器用于较小的div，请参见图片）10px。 Now when i resize the window the fixed div comes over the div to the right. 现在，当我调整窗口大小时，固定的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? 所以问题是如何在垂直滚动页面时使这个固定的div保持在同一位置并使其始终与正确的div相距10px？ Css class for fixed is: 固定的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: 这是我现在拥有的：

在此输入图像描述

Answer 1

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

Answer 2

Two ways I would do it: 我会采取两种方式：

1) custom javascript that reads the width of window and changes your css 1）自定义javascript，读取窗口的宽度，并更改您的CSS

2) or using a library like adapt.js to detect and swap between .css 2）或使用像adapt.js这样的库来检测和交换.css

Key term: Responsive Web Design 关键术语：响应式Web设计

Take a look at adapt.js its a javascript library that will load different css files based on page window size. 看看adapt.js是一个javascript库，它将根据页面窗口大小加载不同的css文件。 This technique is great if you want to display things different between lets say mobile and desktop screen. 如果你想在移动和桌面屏幕之间显示不同的东西，这种技术很棒。

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>

Answer 3

Wrapper! 包装器！

I guess the best way to control this is by using a wrapper div . 我想控制它的最好方法是使用包装器div 。 So, have something like this: 所以，有这样的事情：

<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 div is not necessary as the body itself is relative ly position ed. 我觉得包装div不是必需的，因为body本身是relative position 。 Using this method, the div stays in the same position. 使用此方法， div保持在相同的位置。

如果窗口大小改变，则移动固定位置的div

问题描述

3 个解决方案

解决方案1
3 已采纳 2012-12-19 17:35:27

解决方案2
2 2012-12-19 17:13:52

解决方案3
0 2012-12-19 17:09:37

Wrapper! 包装器！

Now add with the CSS: 现在添加CSS：

如果窗口大小改变，则移动固定位置的div

问题描述

3 个解决方案

解决方案1 3 已采纳 2012-12-19 17:35:27

解决方案2 2 2012-12-19 17:13:52

解决方案3 0 2012-12-19 17:09:37

Wrapper! 包装器！

Now add with the CSS: 现在添加CSS：

解决方案1
3 已采纳 2012-12-19 17:35:27

解决方案2
2 2012-12-19 17:13:52

解决方案3
0 2012-12-19 17:09:37