步骤

找到您的表格标题，并保存其position
在窗口的scroll事件中添加一个监听器。
检查窗口滚动表格标题位置
1. 如果位置＆lt;窗口滚动 - 添加一个类来修复表头
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

Answer 3

您可以尝试将底部元素包含在一个div中的标题下，然后将该类添加到该div设置溢出到自动

Answer 4

我希望你看起来像这个标题修复Demo

<强> HTML

<div class="wrapper">
<div class="header">Header Fix</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>

<强> CSS

.wrapper {
  border:1px solid red;
}

.header {
  background:red;
  height:100px;
  position:fixed;
  left:0;
  right:0;
  top:0;

}

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

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

Answer 5

为了保持任何块元素的位置固定，你需要在样式的display属性中使用绝对或固定属性，但不要忘记给出足够的空间并打破顶部元素，否则它将在标题下面部分。

Answer 6

$(window).scroll(function() {
 if ($(this).scrollTop() > 100){  
    $('header').addClass("sticky");
  }
  else{
    $('header').removeClass("sticky");
  }
});

的CSS：

header.sticky {
  font-size: 24px;
  line-height: 48px;
  height: 48px;
  background: #efc47D;
  text-align: left;
  padding-left: 20px;
}

Answer 7

这是使用固定页眉，页脚和列的完整工作版本！

应用相对位置的类，这一点非常重要，否则固定列将使页眉和页脚重叠，然后在需要的表级别定义这些类：“ sticky-table”（强制性），“ sticky-header”， “粘性列”，“粘性页脚”，而不是调用函数“ applyStickyHeaders”。仅此而已！

$(function(){
    applyStickyHeaders();
});

完整示例：

https://jsfiddle.net/pintilies/6zLyxewg/4/

在IE，FireFox和Chrome中进行了测试。

滚动时固定标题

7 个答案:

步骤