Gdy użytkownik przewija do dolnej części strony, chcę pokazać div, oczywiście z jQuery. A jeśli użytkownik przewinie z powrotem do góry, div znikną. Więc jak obliczyć rzutnię (lub cokolwiek jest właściwa nazwa) :)Jak wyświetlić div, gdy użytkownik znajdzie się na dole strony?
Dzięki
To musi Ci zacząć:
<!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>
ta zakłada, że body ma margin z 0. W przeciwnym razie musisz dodać górny i dolny margines do $('body').height().
$ (document). scrollTop() powinien dać ci pozycję paska przewijania. możesz to sprawdzić na wysokości dokumentu. następnie zaniknij lub znikaj z div.
Oto mały edit na kodzie BalusC jeśli chcesz pokazać nie div javascript popup:
<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>
Witam. Powiedzmy, że zamiast "body" używam div ID i co jeśli chcę, żeby "hi" pojawiło się, gdy jestem w 80% przewijanego div, na przykład? :) Głosowanie zapłaci dobrą odpowiedź :) –
można użyć następujących:
$(window).scroll(function() {
if ($(document).height() <= ($(window).height() + $(window).scrollTop())) {
//Bottom Reached
}
});
Używam tego powodu mam
body {
height:100%;
}
Nadzieja to pomaga
Dziękuję, byłem dokładnie w tym samym przypadku. Twoje rozwiązanie działa dla mnie! – Adrien
@Adrien Nie ma za co mój przyjacielu. Cieszę się, że mogłem pomóc :) –
czy mówisz o div, który będzie miał pozycję: naprawiony; lub div, który znajduje się na samym dole treści? – codedude
to będzie stała pozycja u dołu strony, może "u dołu: 50px" – Kenan