我在页面中间有一个表格的标题,但由于页面很大,我想在向下滚动页面时将标题固定在浏览器的顶部......
所以我的问题是:如何将标题设置为正常,直到用户向下滚动并且标题的顶部边框接触到浏览器边框,它应该固定在该位置,无论用户向下滚动多远卷轴?
最佳答案
让我解释一下如何做到这一点。
步骤
- 找到您的表格标题,并保存其
位置
- 为窗口的
scroll
事件添加一个监听器。 - 对照表格标题位置检查窗口滚动
- 如果位置<窗口滚动-添加一个类来固定表头
- 否则,重置 css 使其表现得像普通标题。
我发布了一个 you can find here 的 fiddle .
代码示例
HTML
<div class='lots_of_stuff_in_here'> ... </div>
<table>
<thead id='my_fixable_table_header'>
<tr>
<th>My awsesome header number 1</th>
<th>My awsesome header number 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content</td>
<td>Content</td>
</tr>
// much more content
</tbody>
</table>
Javascript
// Just so you get the idea behind the code
var myHeader = $('#my_fixable_table_header');
myHeader.data( 'position', myHeader.position() );
$(window).scroll(function(){
var hPos = myHeader.data('position'), scroll = getScroll();
if ( hPos.top < scroll.top ){
myHeader.addClass('fixed');
}
else {
myHeader.removeClass('fixed');
}
});
function getScroll () {
var b = document.body;
var e = document.documentElement;
return {
left: parseFloat( window.pageXOffset || b.scrollLeft || e.scrollLeft ),
top: parseFloat( window.pageYOffset || b.scrollTop || e.scrollTop )
};
}
关于javascript - 滚动时固定标题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13795283/