Search code examples
jqueryhtmlscrolloffset

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

Within the scroll function below, I am trying to figure out how I can go past the bottom of the div pg-selection by a certain number of px's (let's say 15px).

Like this:

enter image description here

I have tried to modify the `bottom_of_element variable in different ways, but none have worked. I tried:

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

and

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

Does anyone know what I need to do?

I have the following scroll function:

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

  • Your code works fine, you forgot '+' in second example of bottom_of_element example. I've tried this and it works like a charm:

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