Sticky element

A sticky element is an element that remains fixed at the top of the page while scrolling, providing persistent visibility and easy access.

You can easily transform any element into a sticky element by adding just two attributes:

  1. data-sticky attribute to your element
  2. data-sticky-container attribute to the parent

<section>
	<div class="container" data-sticky-container>
		<div class="row">
			<!-- Sidebar START -->
			<div class="col-md-4">
				<div data-sticky data-margin-top="80" data-sticky-for="768">
					Sidebar Content here
				</div>
			</div>
			<!-- Sidebar END -->

			<div class="col-md-8">
				...
			</div>

		</div>
	</div>
</section>

Available options:

Option Type Default Description
data-sticky-wrap boolean false When set to true, the sticky element is wrapped in a <span></span>which has the sticky element's dimensions. This prevents content from "jumping."
data-margin-top number 0 Specifies the margin between the top of the page and the sticky element when scrolled. Default is 0.
data-sticky-for number 0 Specifies a breakpoint (in pixels). The sticky behavior is activated when the viewport width is larger than this value and deactivated when smaller. Default is 0.
data-sticky-class string null dds a class to the sticky element when it becomes stuck.

Required plugin

Copy-paste the following script at the end of your page after bootstrap.bundle.min.js to enable it.


<script src="assets/vendor/sticky-js/sticky.min.js"></script>

FAQs

1. What should I do if my sticky element isn't working as expected?

  • Check Attribute Spelling: Ensure all data-sticky attributes are spelled correctly.
  • Inspect Parent Container: Make sure the parent container has the data-sticky-container attributes.
  • Test with Minimal Setup: Remove additional CSS or JavaScript to test the sticky element in isolation.
  • Browser Compatibility: Verify the sticky behavior in different browsers to identify potential compatibility issues.