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

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

3 个答案: