1

如果我去小于或等于页面上的一个类，我希望有一个 div 出现。

IE。一旦页面向下滚动到某个类，我希望这个框出现。通过在页面上向下滚动，我希望这个框仍然出现，直到我回到课堂之上。

目前，这并没有完全按照上面提到的方式进行，而是在我在其上方或下方滚动时隐藏。我需要以某种方式修改代码：

    $(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

3

尝试更改此行：

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

到

return (elemTop <= docViewBottom);

这将按照您的意图显示和隐藏元素：

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

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

于 2011-10-24T15:12:54.537 回答
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 回答