滚动时固定标题

Question

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

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

Answer 1

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

步骤

1. 找到你的表头，并保存它的position
2. 为窗口的scroll 事件添加监听器。
3. 根据表格标题位置检查窗口滚动
   1. 如果位置
   2. 否则，将 css 重置为像普通标题一样。

我已经发布了一个you can find here 的小提琴。

代码示例

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

​

Answer 2

您正在寻找一个水平方向的“粘性框”，它会在您滚动页面时跟随您。

这里是一个演练，解释了如何为侧边栏创建这种效果：http://css-tricks.com/scrollfollow-sidebar/

我修改了代码以使用跨越页面宽度的通用示例：

HTML：

<div class="wrapper">
  <div class="head">HEAD</div>
  <div class="header">Table Header</div>
  <div class="content">Content</div>
  <div class="footer">Footer</div>
</div>​

CSS：

.wrapper {
  border:1px solid red;
}
.head{
  height: 100px;
  background: gray;
}
.header {
  background:red;
  height:100px;
  left:0;
  right:0;
  top:0px;
  margin-top:100px;
  position:absolute;
}

.content {
   background:green;
   height:1000px;
}

.footer {
   background:blue;
   height:100px;
}

jQuery:

$(function() {

    var $sidebar = $(".header"),
        $window = $(window),
        offset = $sidebar.offset(),
        topPadding = 0;

    $window.scroll(function() {
        if ($window.scrollTop() > offset.top) {
            $sidebar.stop().animate({
                top: $window.scrollTop() - offset.top + topPadding
            });
        } else {
            $sidebar.stop().animate({
                top: 0
            });
        }
    });

});​

​当您滚动超出最初出现的位置时，这会将标题块动画化到视图中。

jsFiddle here