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

我在写一段代码时遇到了一个小问题，并且希望有人能够指引我朝着正确的方向发展。我有一个3列显示的网站，从左到右我有导航栏，内容和侧栏用于新闻更新等。我试图设置导航栏粘到屏幕的顶部，当用户滚动时，这工作正常。我遇到的问题是，当nav元素被修复时，它会出现在表格中并调整大小。这是我所有三块的代码。使用jQuery修复div，但它在流出时调整大小

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"); 
     } 
    }); 
});

所以，一切正常，我有唯一的问题是，一旦nav元素是固定的，因为它不在表中，它不再使用10％宽度属性并缩小到w链接本身的宽度。

有没有办法在应用.stick类时保留尺寸？

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

非常感谢您提前帮助您提供任何帮助！

来源

2014-11-05 aylnon

能否请您补充** **小提琴是什么？当我尝试使用你的代码对我来说工作的很好。 – Swati 2014-11-05 05:32:14

http://jsfiddle.net/xszs217c/ – aylnon 2014-11-05 05:55:59

使父元素tr#left定位为relative。

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

请参阅更新fiddle

来源

2014-11-05 06:13:01 Swati

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

回答

相关问题