Question

我如何做以下事项：当在狭窄的屏幕上打开页面或更改浏览器窗口大小时，我需要一个div来改变它的位置。当页面向上或向下滚动时，固定div应该保持在相同的垂直位置，但我还需要它可以说距离最大的div（一个容器用于较小的div，请参见图片）10px。现在，当我调整窗口大小时，固定的div会越过右边的div。

所以问题是如何在垂直滚动页面时使这个固定div保持在同一位置并使其始终与右div相距10px？修复的Css类是：

.fixed{
    width:40px;
    height:40px;
    position:fixed;
    bottom:100px;
    left:100px;
    text-indent:-9999px;
}

实际上我正在尝试实现“返回顶部”按钮，因此固定div是此按钮，最大的div是页面内容。

这就是我现在所拥有的：

enter image description here

Answer 1

更改你的CSS，使它看起来像这样：

.fixed{
    width:40px;
    height:40px;
    position:fixed;
    bottom:100px;
    left:50%;
    margin-left: -[(maincontainerwidth/2) + 50];
    text-indent:-9999px;
}

Answer 2

我会采取两种方式：

1）自定义javascript，读取窗口的宽度并更改你的css

2）或使用像adapt.js这样的库来检测和交换.css

关键词：Responsive Web Design

看看adapt.js它的javascript库，它将根据页面窗口大小加载不同的css文件。如果你想在移动和桌面屏幕之间显示不同的东西，这种技术很棒。

在您的方案中，这也可能有用。

1）参考adapt.js

<script src="/js/adapt.js" type="text/javascript></script>

2）配置

基本上你有两种观点：

// 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）完全看起来像

<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

包装！

我想控制它的最佳方法是使用包装器div。所以，有这样的事情：

<div class="wrap">
    <!-- Contents -->
    <div class="fixed">
    </div>
</div>

现在添加CSS：

.wrap {width: [fixed width]; position: relative;}
.fixed {left: -100px;}

我认为包装div不是必需的，因为body本身是relative ly position ed。使用此方法，div保持在同一位置。

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

3 个答案:

包装！

现在添加CSS：