Исчезновение фиксированной всплывающей подсказки при прокрутке

Question

Я пытаюсь создать messagebox, который привязан к нижней части веб-страницы, поэтому, когда пользователь прокручивает страницу, он остается на месте (простой css).Однако я бы хотел, чтобы окно сообщения исчезало, когда пользователь прокручивает страницу до определенной точки.

Например, если у вас есть форма регистрации в нижней части вашего сайта, я бы хотел создать окно сообщения с надписью "прокрутите вниз до регистрации", и когда пользователь прокручивает страницу вниз до верхней части формы регистрации, сообщение исчезает или закрывается формой.Поэтому, когда они прокручивались вверх, сообщение появлялось снова.

Это не моя реализация, а точная иллюстрация концепции.

У меня нет никакого опыта разработки на Javascript, но я надеялся, что для этого существует существующий метод.Хотя я готов учиться, это то, что я хотел бы использовать.

Есть какие-нибудь мысли?Или концепции, которые нужно начать изучать?

Спасибо, ребята!(Я думаю, это мог бы быть действительно умный метод выделения определенного контента, который, возможно, пользователи пропустили бы, если бы не прокручивали всю страницу.)

Answer 1

This должно получиться (протестировано в IE7, Firefox, Chrome, Safari).

Он использует 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.