JQuery сделать что-то, если страница прокручивается до имени класса

Question

Я хочу, чтобы 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 = $('.pricebox'); // the element to act on if viewable
    $(window).scroll(function() {
        if(isScrolledIntoView(myelement)) {
            $('#prodbar').show();
        } else {
            $('#prodbar').hide();// do something when element is not viewable
        }
    });
});

Answer 1

Попробуйте изменить эту строку:

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

до

return (elemTop <= docViewBottom);

И это покажет и скроет элемент, как вы и предполагали:

    if(isScrolledIntoView(myelement)) {
        $('#prodbar').slideDown("slow");
    } else {
        $('#prodbar').slideUp("slow");
    }

http://jsfiddle.net/KKeuR/2/

Answer 2

Насколько я понимаю, вы пытаетесь заставить элемент показываться, когда окно находится в границах выбранного элемента.

Используя documentTop в обоих примерах, вы можете проверить, что верхняя часть окна больше или равна верхней части элемента и убедиться, что верхняя часть окна меньше или равна нижней части элемента.

$(document).ready(function() {
    function isScrolledIntoView(elem) {
        var docViewTop, docViewBottom, elemTop, elemBottom;

        docViewTop = $(window).scrollTop();
        docViewBottom = docViewTop + $(window).height();

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

        return docViewTop >= elemTop && docViewTop <= elemBottom;
    }

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

http://jsfiddle.net/halfcube/Xb5Yq/