Когда пользователь прокручивает страницу до конца, я хочу показать какой-то div, конечно же, с помощью jQuery. И если пользователь прокручивает обратно наверх, div исчезает. Итак, как рассчитать видовой экран (или как правильно называется):)
Спасибо
Это должно помочь вам начать:
<!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>
Предполагается, что body имеет margin из 0. В противном случае вам нужно добавить верхнее и нижнее поле к $('body').height().
body
margin
0
$('body').height()
Вы можете использовать следующее:
$(window).scroll(function() { if ($(document).height() <= ($(window).height() + $(window).scrollTop())) { //Bottom Reached } });
Я использую это, потому что у меня есть
body { height:100%; }
Надеюсь, это поможет
Вот небольшое редактирование кода BalusC, если вы хотите показать div, а не всплывающее окно 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>
$ (документ). scrollTop () должно указывать положение полосы прокрутки. Вы проверяете это по высоте документа. затем постепенно увеличивайте или уменьшайте значение деления.