Question

我实现的功能默认情况下不会在我的网站上加载评论。只有当用户滚动到页面底部时，才会加载注释。

在下面的代码段中，我应该将click()替换为什么，以便评论只会加载div的用户展示。

<div class="show-comments"></div>

<script>
    $(document).ready(function () {
        $('.show-comments').on('click', function () {
            // load comments code
        });
    });
</script>

Answer 1

您可以检查可滚动元素的scroll事件，如果滚动位置到达您想要的位置，则显示注释。这里有一个示例来指导您完成此任务：

HTML代码

<div id="container"><!-- Your content --></div>
<div id="comments"><!-- Your comments here --></div>

jQuery代码

var body = $("body"),
    comments = $("#comments"),
    win = $(window),
    near = 20,
    delay = NaN;

//---Show comments
function showComments() {

    comments.slideDown();

    win.off("scroll");

}

//---Check comments visibility
function checkCommentsVisibility() {

    if (!isNaN(delay)) {
        clearTimeout(delay);
    }

    delay = setTimeout(function() {

        var scrollHeight = body[0].scrollHeight - win.height();
        var scrollTop = body.scrollTop();

        if (scrollTop > scrollHeight - near) {

            showComments();

        }

    }, 100);

}

//---Scroll event
win.on("scroll", checkCommentsVisibility);

您可以a working example向您展示功能。

但是如果你想逐步加载Ajax评论，根据滚动位置，我建议你使用像Scroll Magic这样的插件。

jQuery：在印象上加载类

1 个答案: