Question

我有3张桌子，其中一张我希望在滚动超过特定距离后修复

    var distance = $("#thead").offset().top;
    $(window).scroll(function () {
      var wdistance = $(window).scrollTop();
      if (wdistance > distance) {

      };
   })

demo jsfiddle

我想说当“if”是正确的时候，当滚动页面时，带有“thead”id的div的位置会固定在其他表的顶部。在id为“first”的div完成之后，<div id="thead"></div>将回到之前的位置。

Answer 1

您可以创建一个.fixed类，并在#thead元素中添加/删除它，如下所示：

<强> CSS

* { padding: 0; margin: 0; } /* Tiny reset for removing paddings and margins */

.fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
}

请注意，您必须从<body>元素中删除填充/边距以调整每列的宽度（#thead定位时）。

或者也可以为定位的#thead元素使用相同的填充/边距。

var $table = $("#thead"),
    $window = $(window),
    distance = $table.offset().top;

$window.scroll(function () {
    var wdistance = $window.scrollTop();

    if (wdistance > distance) {
        $table.addClass('fixed');
    } else {
        $table.removeClass('fixed');
    }
});

<强> WORKING DEMO

在滚动期间需要修复表格

1 个答案: