javascript - 当按钮到达 Web 浏览器屏幕顶部时，如何使用 jQuery 执行操作？

Question

我想在用户滚动并且按钮到达屏幕顶部时执行一个操作。当我只使用一个按钮时，我的原始脚本有效。但是当我添加多个按钮时，我的脚本不起作用。

我的原始脚本是:

jQuery(document).ready(function ($) {
    var distance = $("button[data-page='2']").offset().top;

    $(window).on("scroll",function() {
        if (checkVisible($("button[data-page='2']"))) {
            console.log('button 2 scrolled to the top');
            $(window).off('scroll');
        }


        else {
            // do nothing
        }


    });

    function checkVisible( elm, eval ) {
        eval = eval || "object visible";
        var viewportHeight = $(window).height(), // Viewport Height
            scrolltop = $(window).scrollTop(), // Scroll Top
            y = $(elm).offset().top,
            elementHeight = $(elm).height();

        if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
        if (eval == "above") return ((y < (viewportHeight + scrolltop)));
    }



});

HTML 是

    <button data-page="2">
        Load More
    </button>

    <div>
        content
    </div>

但是，当我添加多个按钮时，我的脚本不起作用，并且我在控制台中收到以下错误消息:Uncaught TypeError: Cannot read property 'top' of undefined

我想我可能需要创建多个函数？不确定为什么它不起作用

jQuery(document).ready(function ($) {
    var distance = $("button[data-page='2']").offset().top;

    $(window).on("scroll",function() {
        if (checkVisible($("button[data-page='2']"))) {
            console.log('button 2 scrolled to the top');
            $(window).off('scroll');
        }

        else if (checkVisible($("button[data-page='3']"))) {
            console.log('button 3 scrolled to the top');
            $(window).off('scroll');
        }

        else if (checkVisible($("button[data-page='4']"))) {
            console.log('button 4 scrolled to the top');
            $(window).off('scroll');
        }

        else {
            // do nothing
        }


    });

    function checkVisible( elm, eval ) {
        eval = eval || "object visible";
        var viewportHeight = $(window).height(), // Viewport Height
            scrolltop = $(window).scrollTop(), // Scroll Top
            y = $(elm).offset().top,
            elementHeight = $(elm).height();

        if (eval == "object visible") return ((y < (viewportHeight + scrolltop)) && (y > (scrolltop - elementHeight)));
        if (eval == "above") return ((y < (viewportHeight + scrolltop)));
    }



});

HTML 是:

    <button data-page="2">
        Load More
    </button>

    <div>
        content
    </div>

    <button data-page="3">
        Load More
    </button>

    <div>
        content
    </div>

    <button data-page="4">
        Load Mo

    <div>
        content
    </div>

我应该提到 data-page="3"和 data-page="4"可能不在 DOM 中，并且在单击按钮 data-page="2"之前不会显示。

我已经包含了一个图像示例来显示我的布局

Answer 1

这是您要找的吗？

$(document).ready(function() {
  var hasRun = false
  $(window).on('scroll', scrollHandler)
})

var scrollHandler = function() {
  if (hasReachedTop('button[data-page="2"]')) {
    console.error('button 2 has reached the top')
    $(window).off('scroll', scrollHandler)
  }
}

var hasReachedTop = function (selector) {
  return $(document).scrollTop() >= $(selector).offset().top
}

编辑代码以移除按钮点击顶部时的 scroll 监听器。