使用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，但它在流出時調整大小

回答

相關問題