# Sticky element

Sticky element is an element that sticks to the top of the page while scrolling the page

You can easily transform any element into Sticky by adding just two things:

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 it's `true` sticky element is wrapped in `<span></span>` which has sticky element dimensions. Prevents content from "jumping".
data-margin-top | number | 0 | Margin between page and sticky element when scrolled
data-sticky-for | number | 0 | Breakpoint which when is bigger than viewport width, sticky is activated and when is smaller, then sticky is destroyed
data-sticky-class | string | null | Class added to sticky element when it is 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>