Khi người dùng cuộn xuống cuối trang, tôi muốn hiển thị một số div, với jQuery tất nhiên. Và nếu người dùng cuộn trở lại đầu anh ấy, div sẽ biến mất. Vậy làm thế nào để tính toán khung nhìn (hoặc bất cứ điều gì là đúng tên) :)Làm cách nào để hiển thị div khi người dùng đến cuối trang?
Cảm ơn
này phải giúp bạn bắt đầu:
<!doctype html>
<html lang="en">
<head>
<title>SO question 2768264</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($('body').height() <= ($(window).height() + $(window).scrollTop())) {
alert('Bottom reached!');
}
});
});
</script>
<style>
body { margin: 0; }
</style>
</head>
<body>
<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
</body>
</html>
này giả định rằng body có margin của 0. Khác bạn sẽ cần thêm lề trên và dưới vào $('body').height().
$ (document). scrollTop() sẽ cho bạn vị trí của thanh cuộn. bạn kiểm tra xem có chiều cao tài liệu không. sau đó mờ dần vào hoặc ra khỏi div.
Dưới đây là một chỉnh sửa nhỏ trên mã của BalusC nếu bạn muốn hiển thị một div không một popup javascript:
<head>
<title>SO question 2768264</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($("body").height() <= ($(window).height() + $(window).scrollTop())) {
$("#hi").css("display","block");
}else {
$("#hi").css("display","none");
}
});
});
</script>
<style>
body { margin: 0; }
#hi {
background: red; color: #FFF; position: fixed; bottom: 0px; right: 0px; display: none;
}
</style>
</head>
<body>
<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p<p>p
<div id="hi">HIIIIIIIIIIII</div>
</body>
Xin chào. Hãy nói thay vì "cơ thể" tôi đang sử dụng một ID div và nếu tôi muốn "hi" xuất hiện khi tôi ở 80% của div di chuyển, ví dụ? :) Bình chọn lên sẽ trả một câu trả lời tốt :) –
Bạn có thể sử dụng như sau:
$(window).scroll(function() {
if ($(document).height() <= ($(window).height() + $(window).scrollTop())) {
//Bottom Reached
}
});
tôi sử dụng điều này bởi vì tôi có
body {
height:100%;
}
Hope this helps
Cảm ơn bạn, tôi đã chính xác trong cùng một trường hợp. Giải pháp của bạn làm việc cho tôi! – Adrien
@Adrien Bạn được chào đón bạn tôi. Mừng vì tôi có thể giúp :) –
bạn đang nói về một div sẽ có một vị trí: cố định; hoặc div nằm ở cuối nội dung? – codedude
nó sẽ được cố định vị trí ở dưới cùng của trang, có thể "dưới: 50px" – Kenan