Question

如果我去一个页面上的小于或等于一个班级，我想要出现一个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
        }
    });
});

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/

如果页面向下滚动到类名，jQuery会做一些事情

2 个答案: