如果页面向下滚动到类名，jQuery 会执行某些操作

Question

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

即。我希望当页面向下滚动到某个类别时出现此框。通过在页面上向下滚动，我希望此框仍然显示，直到我返回到类(class)上方。

目前，这并没有完全执行上面提到的操作，而是当我在其上方或下方滚动时它会隐藏。我需要以某种方式修改代码:

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