1

ページ上のクラス以下に移動すると、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
        }
    });
});
4

2 に答える 2

0

私の理解では、ウィンドウが選択した要素の境界内にあるときに要素を表示しようとしています。

両方の例で 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/

于 2011-10-24T15:26:59.330 に答える