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

使用jQuery来修复div，但它在流出时会调整大小

1 个答案: