This is my code on github我需要有關表格的首行幫助被粘
這是我用什麼來讓它粘
var h = document.getElementById("sticky_menu");
var stuck = false;
var stickPoint = getDistance();
function getDistance() {
var topDist = h.offsetTop;
return topDist;
}
window.onscroll = function(e) {
var distance = getDistance() - window.pageYOffset;
var offset = window.pageYOffset;
if ((distance <= 0) && !stuck) {
h.style.position = 'fixed';
h.style.top = '0px';
h.style.paddings ='1px';
h.style.margins='1px';
stuck = true;
} else if (stuck && (offset <= stickPoint)){
h.style.position = 'static';
stuck = false;
}
}
This is what I get after scrolling
這是我使用的JavaScript
<tr id="sticky_menu" class="comparison" >
<th width="24%" class="tl tl2"></th>
<th width="19%" class="product" style="background:#f96e5b; border-top-left-radius: 5px; border-left:0px;">Exchange Online Plan 1</th>
<th width="19%" class="product" style="background:#f96e5b;">Office 365 Business Essential </th>
<th width="19%" class="product" style="background:#f96e5b;">Office 365 Business </th>
<th width="19%" class="product" style="border-top-right-radius: 5px; border-right:0px; background:#f96e5b;">Office 365 Business Premium</th>
</tr>
<tr >
爲什麼你不只是使用'位置:sticky'? – gcampbell
在哪裏使用位置:粘? –
實際上這可能不是一個好主意,除非你想使用polyfill。 – gcampbell