滚动时固定标题

Question

我在页面中间有一个表格的标题,但由于页面很大,我想在页面向下滚动页面时将标题修复到浏览器的顶部...

所以我的问题是:如何将标题设置为正常,直到用户向下滚动并且标题的顶部边框触及浏览器边框,它应该保持固定在该位置,无论用户滚动多远？

Answer 1

让我解释一下如何做到这一点.

脚步

1. 找到你的表头,并保存它 position
2. 为窗口的scroll事件添加一个监听器.
3. 检查窗口滚动表格标题位置
   1. 如果位置<窗口滚动 - 添加一个类来修复表头
   2. 否则,将css重置为正常标头.

我发布了一个你可以在这里找到的小提琴.

代码示例

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

​