изменить div в зависимости от того, как далеко вы прокрутили страницу вниз

Question

Я пытаюсь изменить текст внутри div в зависимости от того, как далеко вниз вы пролистали страницу. Я возился с jQuery scrollTop и высотой документа, но до сих пор не смог дать желаемых результатов.

Как я могу получить положение элемента на странице, а затем заставить jQuery что-то сделать после того, как вы прокрутите до этой позиции элементов?

Помощь очень ценится!

Answer 1

Был вопрос о Stackoverflow, который задавал нечто похожее, и я выдвинул небольшой пример, чтобы проиллюстрировать, как это сделать. Я не могу найти вопрос сейчас, но вот пример . В этом примере есть div, который отображается, пока вы не прокрутите к определенному элементу на странице, в котором div скрыт. Вы можете изменить это, чтобы достичь того, что вы хотите, так как идея та же самая. Вот код, модифицированный для того, что вам нужно:

$(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));
    }

    var myelement = $('#formcontainer'); // the element to act on if viewable
    $(window).scroll(function() {
        if(isScrolledIntoView(myelement)) {
            // do something when element is scrolled to and viewable
        } else {
            // do something when element is not viewable
        }
    });
});

Answer 2

Старый добрый ppk от quirksmode.org может показать вам, как найти позицию элемента: «Этот скрипт находит реальную позицию, поэтому если вы измените размер страницы и снова запустите скрипт, он укажет на правильную новую позицию элемента. "