我正在使用以下腳本來滾動頁面時修復了我的菜單。滾動功能使左側收縮
var num = 5;
$(window).bind('scroll', function() {
if ($(window).scrollTop() > num) {
$('.scroll').css({'position':'fixed', 'top':'0px'});
} else {
$('.scroll').css({'position':'', 'top':''});
}
});
我正在使用此腳本的表。請參閱Jsfiddle。 向下滾動時，該標題將收縮至左側。
爲什麼發生這種情況，我該如何解決？ 它應該支持主流瀏覽器（不是IE）。
當您設置position: fixed左側的道具似乎設置爲0.因此，標題正在移動到左側角落。你可能必須玩display和width道具來做你的事情。另請注意，添加/刪除類比通過.css()設置內聯樣式更好。看看下面的演示，並相應地調整代碼以滿足您的需求。
var num = 5;
$(document).bind('scroll', function() {
if ($(document).scrollTop() > num) {
\t \t $('.scroll').addClass("scrolled");
} else {
$('.scroll').removeClass("scrolled");
}
});.scroll { width: 100%; }
.scroll th { width: 49% }
.scrolled { position: fixed; top: 0; }
.scrolled th { display: inline-block; width: 47.5% }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="mytable" width="100%">
<thead>
<tr class="scroll">
<th>Id</th>
<th>Value</th>
</tr>
</thead>
<tbody>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
<tr>
<td align="center" width="20%">0</td>
<td align="center" width="20%">1</td>
</tr>
</tbody>
</table>有可能是做這件事的其他方式，但是這是我能迅速地想的:)
那是因爲你還沒有設置左，你需要，如默認值是0（左邊框）。 – lshettyl
@LShetty我沒有得到你 – KarSho
你可以看到這一點，使只對表身 http://stackoverflow.com/questions/17067294/html-table-with-100-width-with-滾動vertical-scroll-inside-tbody – Jala