Button behind table appears when user scrolls past all rows

Question

I want to display a large table to users. To ensure they see all the data before they proceed to the next step I want to hide the "Next" button in a way that it will only be visible after the user has scrolled past all the rows.

I would also like it to look like the button was hiding behind the table all along, instead of having the button pop in and out of existence.

So far I have experimented with fixed positions and z-indexes like this:

<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>

and with css:

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

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

Now the button is not accessible if the table is larger than the window, as the page's content height does not take into account the button's height. So I try to increase artificially the height with code such as

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

JSFiddle (note that you must resize the "Result" pane so that it is small enough for the table to hide the button) but I have run into issues.

The first issue is that I would much prefer do this declaratively. Second, The button cannot be clicked as even though it is visible, the browser seems to believe I am clicking the div. Lastly, all this resides in an angular project, and window.ready doesn't seem to always trigger properly.

What am I doing wrong?

Answer 1

The fixed sized button may not make the document grow, but you can use margin of the table to do so.

Give your table margin-bottom with value larger than or equal to the buttons's height:

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

Here is the fiddle