Verify if the DIV element has a sticky positioning property

Question

Verify if the DIV element has a sticky positioning property

I'm utilizing the Bootstrap 4 "sticky-top" class (for position: sticky) to affix elements to the top.

Is there a method to include an additional class like "is-sticky-top" to the DIV when it becomes "stuck"?

Although I came across some resources, such as this one, I struggled to adapt it to suit my requirements: https://developers.google.com/web/updates/2017/09/sticky-headers

UPDATE - To specify my need:

The class "sticky-top" assigns position:sticky to an element. In my specific case, I desire to assign an extra class to a DIV only when the DIV is stuck at the top. This could be used, for instance, to apply a shadow effect to the element but exclusively when it's "stuck" at the top. Thus, I require class B solely under these circumstances.

css html css-position bootstrap-4

Answer 1

Answer №1

Hi there! I recently shared a Medium article on this topic. It may or may not directly relate to your situation, but I recommend taking a few minutes to give it a read.

Check out the article here

The main idea behind this technique is to use an element as a cover for the shadow. As the user scrolls, the cover moves up to reveal the shadow behind it.

You can see this technique in action with this JSFiddle link: View the demo here

.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

Hi there! I recently shared a Medium article on this topic. It may or may not directly relate to your situation, but I recommend taking a few minutes to give it a read.

Check out the article here

The main idea behind this technique is to use an element as a cover for the shadow. As the user scrolls, the cover moves up to reveal the shadow behind it.

You can see this technique in action with this JSFiddle link: View the demo here

.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 3

Answer №2

My solution can handle any top/bottom offset you specify. It checks for the elements you want and determines if the stickiness threshold has been reached.

If scroll/resize events occur too frequently, you can use the commented-out version below with a debounce to check less often.

Note: This solution assumes that your top/bottom CSS values are in pixels, as other units may not work properly 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 4

My solution can handle any top/bottom offset you specify. It checks for the elements you want and determines if the stickiness threshold has been reached.

If scroll/resize events occur too frequently, you can use the commented-out version below with a debounce to check less often.

Note: This solution assumes that your top/bottom CSS values are in pixels, as other units may not work properly 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 5

Answer №3

To determine this, the only option is to calculate the position of the div while scrolling.

$('#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>

Answer 6

To determine this, the only option is to calculate the position of the div while scrolling.

$('#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>

Verify if the DIV element has a sticky positioning property

Answer №1

Answer №2

Answer №3

Similar questions

How can we display a fallback image if the Iframe is unable to load the resource at src in AngularJs?

What is the best way to retrieve multiple model values from a single selection in AngularJS?

Exploring ways to incorporate or eliminate animations on mobile devices using html/css

Contrasting importing CSS directly in index.html versus using styleUrls in Angular 5

How to Maintain SASS Code Efficiency with Media Queries

Tips for invoking a function to automatically load elements on a jQuery mobile website

What could be the reason for my navbar menu getting cropped?

Tips for creating a custom Menu with content overflow in a single direction

combining: enhancing the value of the background-image property

The React modal refuses to disappear, stubbornly clinging to the original component it sprang from

Exploring the integration of Construct 3 objects with ReactJs

What is the method for aligning inline-block text to the right after a line break?

A CSS rule to display a nested list on the left-hand side

Desktop displays do not show images, only mobile devices

Arranging CSS text in a parallel format and aligning it vertically

What is the best way to adjust the bootstrap column size using variables and decide when to insert a new row dynamically?

Navigating between divs with a 100% height using up and down movements

Efficiently reducing the size of a CSS selector string with javascript

How can I move one of the multiple input fields to the top right side?

CSS - With the abundance of positioning methods available, determining the right approach can be quite a puzzle