javascript - 当用户滚动经过所有行时，表格后面的按钮出现

Question

我想向用户显示一个大表格。为确保他们在继续下一步之前看到所有数据，我想隐藏“下一步”按钮，使其仅在用户滚动过所有行后可见。

我还希望按钮看起来一直隐藏在 table 后面，而不是让按钮突然出现又消失。

到目前为止，我已经尝试过这样的固定位置和 z 索引:

<div id="container>
<table id="table" class="table">
<!-- a lot of rows, asynchronously bound with images in some cells -->
</table>
<button id="button" class="nextButton">
  next
</button>
</div>

和CSS:

.nextButton {
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: -1;
}

.table {
  background-color: white;
  width: 100%;
}

现在，如果表格大于窗口，则无法访问按钮，因为页面的内容高度不考虑按钮的高度。所以我尝试用如下代码人为地增加高度

$(window).load(function() {
  var height = $("#button").height();
  $("#container").height("+=" + height);
});

JSFiddle (请注意，您必须调整“结果” Pane 的大小，使其足够小以便表格隐藏按钮)但我遇到了问题。

第一个问题是我更愿意以声明的方式来做这件事。其次，即使按钮可见，也无法单击该按钮，浏览器似乎认为我正在单击 div。最后，所有这些都存在于一个 Angular 元素中，并且 window.ready 似乎并不总是正确触发。

我做错了什么？

Answer 1

固定大小的按钮可能不会使文档变大，但您可以使用表格的 margin 来实现这一点。

为您的表格 margin-bottom 提供大于或等于按钮高度的值:

.table {
  background-color: white;
  width: 100%;
  margin-bottom:50px;
}

这是 fiddle