كيف تظهر Div عندما يصل المستخدم إلى أسفل الصفحة؟
سؤال
عندما يقوم المستخدم بالتمرير إلى أسفل الصفحة ، أريد أن أظهر بعض 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()
.
نصائح أخرى
يمكنك استخدام ما يلي:
$(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() يجب أن يعطيك موقف شريط التمرير. يمكنك التحقق من ذلك مقابل ارتفاع المستند. ثم تتلاشى داخل أو الخروج div.
لا تنتمي إلى StackOverflow