Check if DIV is sticky

Question

I'm using the Bootstrap 4 class "sticky-top" (for position: sticky) to stick elements, you guessed it, at the top.

Is there any way to add an extra class like "is-sticky-top" to the DIV when it's "stuck"?

I found this but I couldn't adapt it to my needs: https://developers.google.com/web/updates/2017/09/sticky-headers

EDIT - To clarify what I need:

The class "sticky-top" adds position:sticky to an element. In my case, I want to add an extra class to a DIV if the position of the DIV is sticky on top. For example to add a shadow to the element but only if it's "stuck" on top. So I need class B only in this case

Answer 1

Hey I posted a Medium article about this. May or may not be applicable to your specific use case but I would suggest spending a few min to check it out.

https://medium.com/@parkjoon94/activatable-drop-shadow-on-sticky-elements-d0c12f1ebfdf

So the basic gist of the technique is to use an element to cover your shadow and when the user scrolls, the cover scrolls up to "uncover" the shadow behind it.

Here's a working JSFiddle of it in action: https://jsfiddle.net/parkjoon/tp1e9yad/

.shadow {
  position: sticky;
  top: 200px;
  width: 297px;
  box-shadow: 0px 0.5px 0.5px 1.5px rgba(0,0,0,0.75);
}

.cover {
  position: absolute;
  background: white;
  width: 100%;
  height: 3px;
}

Answer 2

I've come up with a fairly good solution that can work with any top/bottom offset. Just give it which elements to look for and it can determine if the stickiness threshold has been met or not.

Scroll/resize events can be a bit too frequent, so if that's an issue for you just use the commented out version below with a debounce to check less often.

Note that this assumes your top/bottom CSS values will be in pixels, other units might not work here.

$(() => {
  const stuckClass = 'is-stuck';
  const $stickyTopElements = $('.sticky-top');
  const $stickyBottomElements = $('.sticky-bottom');

  const determineSticky = () => {
    $stickyTopElements.each((i, el) => {
      const $el = $(el);
      const stickPoint = parseInt($el.css('top'), 10);
      const currTop = el.getBoundingClientRect().top;
      const isStuck = currTop <= stickPoint;
      $el.toggleClass(stuckClass, isStuck);
    });

    $stickyBottomElements.each((i, el) => {
      const $el = $(el);
      const stickPoint = parseInt($el.css('bottom'), 10);
      const currBottom = el.getBoundingClientRect().bottom;
      const isStuck = currBottom + stickPoint >= window.innerHeight;
      $el.toggleClass(stuckClass, isStuck);
    });
  };

  //run immediately
  determineSticky();

  //Run when the browser is resized or scrolled
  //Uncomment below to run less frequently with a debounce
  //let debounce = null;
  $(window).on('resize scroll', () => {
    //clearTimeout(debounce);
    //debounce = setTimeout(determineSticky, 100);

    determineSticky();
  });

});

.sticky-top,
.sticky-bottom {
  position: sticky;
  z-index: 1000;
  padding: 10px;
  border: 1px solid #CCC;
  background-color: #FFF;
  transition: all 300ms;
}

.sticky-top {
  top: 40px;
}

.sticky-bottom {
  bottom: 40px;
}

.is-stuck {
  background: blue;
  color: white;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<p>some text</p>
<p>some text</p>
<p>some text</p>
<div class="sticky-top">
  Sticky to the top!
</div>

<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>
<div class="sticky-bottom">
  Sticky to the bottom!
</div>

<p>some text</p>
<p>some text</p>
<p>some text</p>
<p>some text</p>

Answer 3

Currently, the only way to check for that is to calculate the div position on scroll.

$('#wrapper').scroll(function() {
 var wrapperTop = $(this).offset().top;
 var headerTop = $('#header').offset().top;
 if (wrapperTop < headerTop)
   $('#header').css('background','grey');
  else
   $('#header').css('background','red');
});

#wrapper {
  width: 200px;
  height: 200px;
  border: 1px solid black;
  overflow-y: scroll;
}

#header {
  height: 50px;
  background: grey;
  top: -1px;
  position: sticky;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</div>
  <div id="header">HEADER TEXT</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>