Заставить фиксированную подсказку исчезнуть при прокрутке

Question

Я пытаюсь создать окно сообщения, которое прикреплено к нижней части веб-страницы, поэтому, когда пользователь прокручивает, он остается на месте (простой 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.