#sticky element

[ghazalisamudra]

Sticky Navigation Menus with jQuery – stickUp stickUp is jQuery plugin and simple plugin that "sticks" an element to the top of the browser window while scrolling past it, always keeping it in view. This plugin works on multi-page sites, but has additional features for one-pager layouts. Read More Download Demo

[riverbellthemes]

Hi, I really like the way you did your menu like when you click 'more' that drop and fade stuff is there any tutorial of it? Thank you and your current theme you are using is so beautiful

Hello! I have not followed any specific tutorial for this, I've learnt the basics of jQuery by myself and by Irma, who sadly has deleted.

But I can link you to some useful tutorials anyway. This by Sarah, this one by Clara and this one by Zsu.

Also, thank you so much for the compliment, it means a lot! :)

[htmluse]

New Post has been published on Html Use

New Post has been published on http://www.htmluse.com/jquery-stuck-a-responsive-sticky-element-plugin/

jQuery Stuck - A responsive sticky element plugin

Download   Demo

Demos

stuck

release

responsive

performance

jQuery Stuck is a responsive sticky element jQuery plugin designed for use with Foundation, Bootstrap, or your own css solution.

1. INCLUDE JS FILES

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> <script src="src/jquery.stuck.js" type="text/javascript"></script>

2. HTML

Stuck

Add the .stuck class to any responsive .row or .columns you would like fixed to the top of the page when scrolled past.

<div class="row stuck"> Stuck Content </div>

Elements will begin to stick to the top of the page, then stack underneath each other in the order they were inserted into the dom.

<div class="row"> <div class="columns stuck">Stuck to the top</div> <div class="columns stuck">Stacked under the first column</div> </div>

All .stuck elements will slide past each other if they don’t overlap, or stack if they collide. This is done for you with collision detection and not by hard-coding top offsets.

Release

Elements can be trained to stay at the bottom of a container when scrolling past the border. Just add the .release class to your .stucke lement, then put it in a .release-container.

<div class="row release-container"> <div class="columns">Spacer content</div> <div class="columns stuck release">Stuck until bottom of release-container</div> <div class="columns">Spacer content</div> </div>

3. JAVASCRIPT

$(document).ready(function() $(window).stuck(); );