1

这是我希望在我的网站上看到的内容。具有主体宽度和三列的表格：20%、70%、10%。随着浏览器窗口大小的调整，表格也会改变，表格的列也会改变它们各自的宽度。

左列（宽度为 20%）包含一个 DIV 元素，其中包含一些文本：

<body style="width:100%;">
 <table style="width:100%;">
  <tr>
   <td style="width:20%">
    <div style="position:relative;">
     Here goes some text.  This is a lot of text and usually should wrap around inside of the DIV element.
    </div>
    ...
  </tr>
 </table>
</body>

这一切都很好，包装和所有。现在，当用户向下滚动页面时，DIV 元素及其内容会向上滚动并滚出窗口。

我想要做的是在 DIV 离开可见区域之前将其“修复”到浏览器的顶部。当用户再次向上滚动时，DIV 应该从浏览器顶部脱离并恢复其正常位置。最终效果是 DIV 要么在可见区域内滚动，要么附加到浏览器的顶部。这是通过我附加到onscroll事件的简单 Javascript 回调实现的，它改变了 和 之间的fixed位置relative。工作也很好。

现在我唯一注意到的是 DIV 的宽度发生了变化！只要它沿着滚动并且只要DIV的位置是，它就等于父TD的宽度relative。Javascript 回调将位置更改fixed 为 DIV 的宽度更改并溢出到相邻表列的那一刻。

如何包含 DIV 的尺寸？

谢谢 ：）

4

2 回答 2

1

感谢@abelito 的提示:) 结果证明解决方案比这更容易一些。当我改变它的位置时，我确实需要改变 DIV 元素的宽度，但由于 TD 有 20% 的宽度，我所要做的就是根据它的位置在 20% 和 100% 之间切换 DIV 的宽度价值。这是有效的Javascript：

var div_is_sticky = false;

window.onscroll = function() {
  var y = window.scrollY;
  if (y >= 250) {
    if (div_is_sticky) {
      // Do nothing.
    }
    else {
      var div = document.getElementById("submenudiv");

      div.style.position = "fixed";
      div.style.width = "20%";

      div_is_sticky = true;
    }
  }
  else if (y < 250) {
    if (div_is_sticky) {
      var div = document.getElementById("submenudiv");

      div.style.position = "relative";
      div.style.width = "100%";

      div_is_sticky = false;
    }
    else {
      // Do nothing.
    }
  }
}

谢谢！

于 2012-12-03T02:26:42.697 回答
0

一旦位置更改为固定，听起来您还必须控制 DIV 的宽度。如果您使用的是原始 javascript，请尝试将 element.style.width 更改为父级的 element.offsetWidth + 'px'。如果你使用 jquery，你应该使用 .width() 方法。链接：

https://developer.mozilla.org/en-US/docs/DOM/element.offsetWidth

http://api.jquery.com/width/

如果用户向下滚动，不要忘记将宽度恢复为“100%”。

于 2012-12-03T02:07:51.010 回答