Question

以下是我希望在我的网站上看到的内容。表格宽度为正文，三列：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的位置是relative，它就等于父TD的宽度。当Javascript回调将位置更改为fixed时，DIV的宽度会更改并溢出到相邻的表列中。

如何包含DIV的尺寸？

谢谢：）

Answer 1

感谢@abelito的提示:)结果证明解决方案比这更容易。当我改变其位置时，我做需要改变DIV元素的宽度，但由于TD的宽度为20％，我所要做的就是将DIV的宽度切换到20％之间和100％取决于其位置值。这是有效的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.
    }
  }
}

谢谢！

Answer 2

一旦将位置更改为固定，听起来你也必须控制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％”。

如何将DIV的宽度固定到其父TD

2 个答案: