Question

滚动时我想保持桌面的固定（可见）。我花了很多时间寻找合适的解决方案并发现了很多jquery插件，但没有一个工作正常。

我有逻辑，但我对javascript和jquery不是很好。我的逻辑是

我将获得我的thead的位置和scrolltop的位置。现在，当我们移动滚动条时，我会用它移动thead（相同的距离），以便它始终保持在顶部。

请帮我把它放在代码的形式。这将是一个很大的帮助。或任何建议开始也是赞赏。

Answer 1

只需使用CSS，您就可以为tbody

设置以下属性

tbody {
    height:300px;   /*set a height*/
    overflow:auto;
    display:block;
}

DEMO

注意：假设当你说"while scrolling"时，你的意思是滚动表格，而不是文档。

如果您真正想要的是使标题“粘滞”，那么您可以添加此jQuery代码：

var $thead = $('thead');
var stickyThead = $thead.offset().top;
var theadWidth = $thead.width();

$(window).scroll(function () {
    if ($(window).scrollTop() > stickyThead) {
        $thead.css({
            position: 'fixed',
            top: '0px',
            width: theadWidth
        });
    } else {
        $thead.css({
            position: 'static',
            top: '0px'
        });
    }
});

DEMO

滚动滚动条时，保持thead可见

1 个答案: