3

我该如何执行以下操作：当页面在窄屏幕上打开或浏览器窗口大小发生更改时，我需要一个 div 来更改其位置。当页面向上或向下滚动时，固定的 div 应该保持在相同的垂直位置，但我还需要它距离最大的 div 10px（较小的 div 的容器，请参见图片）。现在，当我调整窗口大小时，固定 div 会超过右侧的 div。

所以问题是我怎样才能让这个固定的 div 在垂直滚动页面时保持在相同的位置，并使其始终与右侧 div 保持 10px 的距离？固定的CSS类是：

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

事实上，我正在尝试实现一个“返回顶部”按钮，所以固定的 div 是这个按钮，最大的 div 是页面的内容。

这是我现在拥有的：

在此处输入图像描述

4

3 回答 3

3

更改您的 CSS 使其看起来像这样：

.fixed{
    width:40px;
    height:40px;
    position:fixed;
    bottom:100px;
    left:50%;
    margin-left: -[(maincontainerwidth/2) + 50];
    text-indent:-9999px;
}
于 2012-12-19T17:35:27.423 回答
2

我会这样做的两种方法：

1) 读取窗口宽度并更改您的 css 的自定义 javascript

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

关键词：响应式网页设计

看看adapt.js ，它是一个 javascript 库，可以根据页面窗口大小加载不同的 css 文件。如果您想在移动设备和桌面屏幕之间显示不同的内容，这种技术非常有用。

在您的情况下，这也可能有效。

1）参考adapter.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>
于 2012-12-19T17:13:52.727 回答
0

包装！

我想控制它的最好方法是使用 wrapper div。所以，有这样的事情：

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

现在添加 CSS：

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

我觉得包装器div是不必要的，因为它body本身是relatively positioned。使用这种方法，它们div保持在相同的位置。

于 2012-12-19T17:09:37.073 回答