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

发布于 2024-12-12 04:36:02 字数 869 浏览 0 评论 0原文

如果我转到页面上小于或等于某个类，我希望出现一个 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
        }
    });
});

原文

I want to have a div appear if I go to less than or equal to a class on a page.

Ie. I want this box to appear once the page is scrolled down to a certain class. By scrolling downward on the page I want this box to still appear up until I go back ABOVE the class.

Currently this does not do the exact mentioned above, rather it hides when I scroll above or below it. I need to modify the code somehow:

    $(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
        }
    });
});

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

抱着落日 2024-12-19 04:36:02

尝试更改此行：

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

到

return (elemTop <= docViewBottom);

这将按您的预期显示和隐藏元素：

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

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

Try changing this line:

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

return (elemTop <= docViewBottom);

And this will show and hide the element as you intended:

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

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

回复收藏 0 原文

面犯桃花 2024-12-19 04:36:02

根据我的理解，您试图让元素在窗口位于所选元素的范围内时显示。

在两个示例中使用 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/

From my understanding your trying to make an element show when the window is within the bounds of the selected element.

Using the documentTop in both examples you could check that the window top is more then or equal to the element top and ensure that the window top is less then or equal to the element bottom.

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

回复收藏 0 原文

~没有更多了~