如何在 window 滚动函数中考虑额外的底部像素

Question

在下面的滚动函数中，我试图弄清楚如何通过 div pg-selection 的底部一定数量的像素（假设为 15 像素）。

像这样：

我尝试以不同的方式修改 `bottom_of_element 变量，但 none 成功了。我试过了：

var bottom_of_element = $('#pg-selection').offset({bottom: 15}).top + $('#pg-selection').outerHeight();

和

var bottom_of_element = $('#pg-selection').offset().top.bottom 15 + $('#pg-selection').outerHeight();

有人知道我需要做什么吗？

我有以下滚动功能：

$(window).scroll(function () {
   var top_of_element = $('#pg-selection').offset().top;
   var bottom_of_element = $('#pg-selection').offset().top + $('#pg-selection').outerHeight();
   var bottom_of_screen = $(window).scrollTop() + $(window).height();

   if ((bottom_of_screen > top_of_element) && (bottom_of_screen < bottom_of_element)) {
       console.log(" PG Showing");
       $('#cal-selected-thumb').fadeIn(400);
   }
   else {
        console.log(" PG Not Showing");
        $('#cal-selected-thumb').fadeOut(400);
    }
});

Answer 1

您的代码运行良好，您在 bottom_of_element 示例的第二个示例中忘记了“+”。我试过了，效果很好：

var bottom_of_element = $('#pg-selection').offset().top + $('#pg-selection').outerHeight() + 200;

如何在 window 滚动函数中考虑额外的底部像素

How to factor in additional bottom px in a window scroll function

html

jquery

scroll

offset