如何让jquery函数在div显示在屏幕上时运行

Question

简而言之： 我正在开发一个项目，我想在屏幕上显示特定的 div 时运行一个函数。

详细信息： 在我的模板中，屏幕右下角固定有一个滚动到顶部按钮。当有人向下滚动到页脚时，我想隐藏该按钮。 意味着当有人向下滚动到页脚并且页脚的顶部边框显示在屏幕上时，我想要运行一个函数来隐藏“转到顶部”按钮。

请帮我解决这个问题...

Answer 1

$(document).ready(function() {
     var footer = $("footer");
     var f_top = footer.position().top;
      $(window).scroll(function() {
           if ($(window).scrollTop() + $(window).height() >= f_top ) {
                footer.hide();          
           }
           else{
              footer.show();          
           }
       });
    }); 

Answer 2

初始化窗口以监视其滚动

$(document).ready(function () {
    $(window).scroll(function () {
        // get the element that you want check scrolling on it
        var off = $("your-selector").offset().top; 
        var top = $(window).scrollTop() + $(window).height();
        if (off <= top) {
            // do your job
            // for example you can call a function like:
            my_method_to_invoke();
        }
    });
});

您要调用它的函数：

function my_method_to_invoke() {
    // TODO
}

Answer 3

我认为您需要在主体上注册一个滚动侦听器，以检查页脚是否在视图中，如果是，则执行隐藏。像这样的东西...

$(body).scroll(function () {
scrollCheck();
});

var scrollCheck = function () {
    var docTop, docBot, elemTop, elemBot;

    docTop = $(window).scrollTop;
    docBot = docTop + $(window).height();
    elemTop = $(<footer element>).offset().top;
    elemBot = elemTop + $(<footer element>).height();

    if ((elemBottom >= docTop) && (elemTop <= docBot)) {
         $(<button element).hide();
    }
}