Create Container-Relative Sticky Components with jQuery

Relative Sticky Header is a tiny jQuery plugin that gives a easy resolution for making any components sticky inside their dad or mum container.

The plugin fixes key limitations of CSS place:sticky and conventional jQuery/JavaScript fixed-position options. It retains sticky components inside their dad or mum containers, preserves horizontal scrolling, and maintains structure integrity. The relative positioning method prevents content material jumps and structure breaks widespread with mounted positioning.

How It Works:

1. The plugin selects the dad or mum container and the sticky aspect based mostly on the supplied selector.
2. If the sticky aspect is just not discovered, it logs a warning and stops additional execution.
3. The plugin provides a CSS class to the sticky aspect for styling.
4. On window scroll, the plugin calculates the scroll place and adjusts the sticky aspect’s place accordingly.
5. If the scroll place surpasses the unique place of the sticky aspect, it turns into “sticky.” The highest property is updated dynamically based mostly on the scrolling distance whereas making certain it doesn’t exceed the dad or mum’s peak.
6. When the scroll place returns to the unique state, the aspect reverts to its default place.

How To Use It:

1. Obtain the plugin from jQueryScript or set up it by way of npm: 

# NPM
$ npm set up jquery-sticky-header-relative

2. Load the Relative Sticky Header jQuery plugin after you’ve got included the newest jQuery library:

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/dist/jquery.stickyheadersrelative.min.js"></script>

3. Name the stickyHeadersRelative technique on the dad or mum container and go the selector for the aspect you need to make sticky whereas scrolling:

<div class="container">
  <h1>Sticky Heading</h1>
</div>

$(doc).prepared(operate () {
  $('.container').stickyHeadersRelative('h1');
});

4. Customise plugin choices by passing an choices object because the second parameter:

• stickyClass: This feature permits you to specify the CSS class that can be added to the aspect when it turns into sticky. This class can be utilized to use particular kinds to the sticky aspect. As an illustration, you would possibly use it so as to add a shadow, change the background shade, or regulate padding. 
• backgroundColor: This feature units the background shade of the aspect when it is sticky. That is helpful for visually distinguishing the sticky aspect from the remainder of the content material. The default worth is ‘white’. You should use any legitimate CSS shade worth right here, together with named colours (like ‘pink’, ‘blue’), hexadecimal values (like ‘#FF0000’), RGB values (like ‘rgb(255, 0, 0)’), or HSL values.
• zIndex: This feature controls the stacking order of the sticky aspect. A better zIndex worth ensures the sticky aspect seems above different components on the web page. That is essential for stopping the sticky aspect from being obscured by different content material. The default worth is 1000. You need to select a price that is excessive sufficient to make sure the specified stacking order.
• additionalStyles: This feature supplies a method so as to add every other CSS kinds to the sticky aspect. That is an object the place the keys are CSS properties and the values are the corresponding CSS values. 

$('.container').stickyHeadersRelative('h1', {
  stickyClass: 'sticky-element',
  backgroundColor: 'white',
  zIndex: 1000,
  additionalStyles: {}
});

See Additionally:

This superior jQuery plugin is developed by ssv445. For extra Superior Usages, please test the demo web page or go to the official web site.