Nút phía sau bảng xuất hiện khi người dùng cuộn qua tất cả các hàng

Question

Tôi muốn hiển thị một bảng lớn cho người dùng. Để đảm bảo họ xem tất cả dữ liệu trước khi tiến hành bước tiếp theo, tôi muốn ẩn nút "Tiếp theo" theo cách nó sẽ chỉ hiển thị sau khi người dùng đã cuộn qua tất cả các hàng.

Tôi cũng muốn nó trông giống như nút được ẩn đằng sau bảng tất cả cùng, thay vì có nút pop trong và ngoài sự tồn tại.

Cho đến nay tôi đã thử nghiệm với các vị trí cố định và z-chỉ số như thế này:

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

và với css:

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

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

Bây giờ nút là không truy cập được nếu bảng là lớn hơn so với cửa sổ, vì chiều cao nội dung của trang không tính đến chiều cao của nút. Vì vậy, tôi cố gắng tăng nhân tạo chiều cao với mã như

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

JSFiddle (lưu ý rằng bạn phải thay đổi kích thước "quả" cửa sổ để nó đủ nhỏ cho bảng để ẩn nút) nhưng tôi đã chạy vào vấn đề.

Vấn đề đầu tiên là tôi rất muốn làm điều này theo cách khai báo. Thứ hai, Nút không thể được bấm như mặc dù nó có thể nhìn thấy, trình duyệt dường như tin rằng tôi đang nhấp vào div. Cuối cùng, tất cả điều này nằm trong một dự án góc cạnh, và window.ready dường như không luôn kích hoạt đúng cách.

Tôi đang làm gì sai?

Answer 1

Nút có kích thước cố định có thể không làm cho tài liệu phát triển, nhưng bạn có thể sử dụng margin của bảng để làm như vậy.

Cho bảng margin-bottom có giá trị lớn hơn hoặc bằng chiều cao của nút:

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

Đây là fiddle