جعل أداة تلميح ثابت تختفي عن طريق التمرير

Question

أحاول إنشاء صندوق message تم إصلاحه إلى أسفل صفحة ويب، لذلك عند تفريغ المستخدم، يبقى وضعه (CSS بسيطة). ومع ذلك، أود أن يختفي صندوق MessageBox عندما يتم تمرير المستخدم إلى نقطة معينة في صفحة الويب.

على سبيل المثال، إذا كان لديك نموذج اشتراك في الجزء السفلي من موقعك، أود إنشاء صندوق رسائل يقرأ "قم بالتمرير لأسفل إلى التسجيل"، وعندما قمت بتمرير المستخدم إلى أعلى نموذج التسجيل، الرسالة سوف تختفي، أو تغطيها النموذج. لذلك عندما تمرير، سوف تظهر الرسالة مرة أخرى.

هذا ليس تنفيذي، ولكن رسم توضيحي دقيق للمفهوم.

ليس لدي أي خبرة تطور مع جافا سكريبت، لكنها تأمل أن تكون هناك طريقة حالية لهذا الغرض. أنا على استعداد للتعلم رغم ذلك، هذا شيء أود استخدامه.

أي أفكار؟ أو مفاهيم لبدء التعلم؟

شكرا يا رفاق! (أعتقد أن هذا قد يكون طريقة ذكية حقا لتسليط الضوء على محتوى معين ربما يفوت المستخدمون إذا لم يتم التمرير من خلال الصفحة بأكملها.)

Answer 1

This يجب أن تفعل الخدعة (تم اختبارها في IE7، فايرفوكس، كروم، سفاري).

يستخدم jQuery ويظهر العنصر بمجرد أن يكون مرئيا. هذا هو الرمز:

$(document).ready(function() {
    function isScrolledIntoView(elem) {
        var docViewTop = $(window).scrollTop();
        var docViewBottom = docViewTop + $(window).height();

        var elemTop = $(elem).offset().top;
        var elemBottom = elemTop + $(elem).height();

        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom));
    }
    // the element to look for
    var myelement = $('#formcontainer');
    // the element to hide when the above is visible
    var mymessage = $('#mymessage');
    $(window).scroll(function() {
        if(isScrolledIntoView(myelement)) {
            mymessage.hide();
        } else {
            mymessage.show();
        }
    });
});

إذا كنت تريد أن تكون العنصر كله مرئيا قبل أن يتم إخفاء الرسالة، فاستبدل isScrolledIntoView أعلاه مع هذا:

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
      && (elemBottom <= docViewBottom) &&  (elemTop >= docViewTop) );
}

الائتمان لكل من هذه المهام الذهاب إلى this question.