logo标签列表

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

javascripthtmlcssmarkup
3
我应该如何实现以下内容： 当页面在窄屏幕上打开或浏览器窗口大小改变时，我需要一个div来改变它的位置。 当页面上下滚动时，fixed div应该保持相同的垂直位置，但我也需要它距离最大的div（一个包含较小div的容器，请看图片）有10像素的距离。现在当我调整窗口大小时，fixed 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
你可以尝试改变容器 div 本身的位置。 - Harsha Venkataramu
将右侧的 div 相对于小 div 定位。 - Toni Toni Chopper
我无法移动容器div，因为它是页面的内容，并且始终居中。 - roman
如果您的窗口大小小于容器div的大小呢？ - Harsha Venkataramu
@harsha 然后会出现一个水平滚动条 - roman
@innocent_rifle 如果你需要帮忙处理以下的事情，就告诉我。 - Anicho
3个回答
3

将您的CSS更改为以下样式：

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

我会采用以下两种方式：

1）编写自定义Javascript代码，读取窗口宽度并更改CSS样式。

2）或者使用像adapt.js这样的库来检测和切换.css文件。

关键词：响应式网页设计

看看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>
你可以通过媒体查询来完成所有这一切。 - Foreign Object
@ClaytonMisura 是的，但是没有指定CSS3。所以我选择了一种不需要HTML5/CSS3的解决方案。 - Anicho
0

包装器！

我想控制这个的最好方法是使用一个包装器div。所以，可以像这样：

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

现在使用CSS添加：

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

我觉得包裹器 div 不是必要的，因为 body 本身是相对定位。使用这种方法，div 保持在相同的位置。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接