您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

当用户使用jQuery将其滚动到视图外时,表头保持固定在顶部

当用户使用jQuery将其滚动到视图外时,表头保持固定在顶部

您可以通过点击上的scroll事件处理程序window并使用另一个table具有固定位置的事件处理程序来执行此操作,以在页面顶部显示标题

<table id="header-fixed"></table>

#header-fixed {
    position: fixed;
    top: 0px; display:none;
    background-color:white;
}

var tableOffset = $("#table-1").offset().top;
var $header = $("#table-1 > thead").clone();
var $fixedHeader = $("#header-fixed").append($header);

$(window).bind("scroll", function() {
    var offset = $(this).scrollTop();

    if (offset >= tableOffset && $fixedHeader.is(":hidden")) {
        $fixedHeader.show();
    }
    else if (offset < tableOffset) {
        $fixedHeader.hide();
    }
});

用户向下滚动足够远以隐藏原始表头时,将显示表头。当用户再次向上滚动页面足够远时,它将再次隐藏。

JS 2022/1/1 18:15:36 有488人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶