Question

我想向用户显示一个大表。为了确保他们在进入下一步之前看到所有数据，我想隐藏“下一步”按钮，使其只有在用户滚过所有行后才能看到。

我还希望它看起来像按钮一直躲在桌子后面，而不是让按钮弹出和不存在。

到目前为止，我已经尝试过像这样的固定位置和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（请注意，您必须调整“结果”窗格的大小，使其足够小，以便表格隐藏按钮）但我遇到了问题。

第一个问题是我更愿意以声明的方式做这件事。其次，按钮无法点击，即使它是可见的，浏览器似乎相信我点击了div。最后，所有这些都存在于一个角度项目中，而window.ready似乎并不总能正确触发。

我做错了什么？

Answer 1

固定大小的按钮可能无法使文档增长，但您可以使用表格的margin来执行此操作。

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

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

以下是fiddle

当用户滚动浏览所有行时，将显示表格后面的按钮

1 个答案: