jquery - 使用 jQuery 修复一个 div，但它在流出时会调整大小

Question

我在编写的一段代码中遇到了一个小问题，希望有人能为我指出正确的方向。我有一个 3 列显示的站点，从左到右我有导航栏、内容和用于新闻更新等的边栏。我正在尝试将导航栏设置为在用户滚动时固定在屏幕顶部，并且效果很好。我遇到的问题是，当 nav 元素被固定时，它会从表格中出来并调整大小。这是我对所有三个部分的代码。

HTML:

<table id="content">
 <tr>
  <td id="left">
   <nav>
    <a>Link 1</a>
    <a>Link 2</a>
    <a>Link 3</a>
    <a>Link 4</a>
   </td>
   ...
 </table>

CSS:

#left { width: 10% }
#middle { width: 70% }
#right { width: 20% }
#content {
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    border-collapse: collapse;

.stick {
    position: fixed;
    top: 0;
}

jQuery:

$(document).ready(function() {
    var s = $("nav");
    var pos = s.offset();                    
    $(window).scroll(function() {
        var windowpos = $(window).scrollTop();
        if (windowpos >= pos.top) {
            s.addClass("stick");
        } else {
            s.removeClass("stick");
        }
    });
});

所以，一切都按照设计的方式工作，我遇到的唯一问题是，一旦导航元素被修复，因为它与表格不一致，它不再使用 10% 宽度属性并缩小到链接本身的宽度。

当我应用 .stick 类时，有没有办法保留它的尺寸？

我使用百分比表示尺寸的原因是我希望网站能够响应水平或垂直手持的平板电脑，而不是玩硬像素尺寸的猜谜游戏。不过，只使用这样的固定属性会更好吗？

提前感谢大家提供的任何帮助!

Answer 1

使父元素tr#left定位relative。

tr#left {
    width: 10%;
    position: relative;
}

请查看更新后的 fiddle