كيف تظهر Div عندما يصل المستخدم إلى أسفل الصفحة؟

StackOverflow https://stackoverflow.com/questions/2768264

  •  03-10-2019
  •  | 
  •  

سؤال

عندما يقوم المستخدم بالتمرير إلى أسفل الصفحة ، أريد أن أظهر بعض 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.

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top