#stkr scrolls

New Post has been published on http://www.htmluse.com/stkr-jquery-plugin-for-fixed-elements-on-a-web-page/

Stkr - jQuery plugin for fixed elements on a web page

Download   Demo

This Jquery Plugin Stkr is an easy way to control when and where fixed elements appear on your web page.

1. INCLUDE JS FILES

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="js/stkr.min.js"></script>

2. HTML

<nav> <ul> <li> <a href="index.html">Documentation</a> </li> <li> <a href="demo.html" class="active">Demo</a> </li> <li> <a href="https://github.com/francinen/stkr-plugin" target="_blank" class="button">Download</a> </li> </ul> </nav> <img src="images/person.png" alt="" id="parachute"> <header class="clearfix"> <div class="header-wrapper clearfix"> <i class="fa fa-hand-o-down fa-5x"></i><h1>Scroll down</h1> </div> </header> <section> <div class="inner-wrapper"> <h2>Make it stick from top to bottom</h2> </div> </section> <section id="sticky1"> <img src="images/person.png" alt="" id="setStart"> </section> <section> <div class="inner-wrapper"> <h2>Set custom start points</h2> </div> </section> <section id="sticky2"> <img src="images/person.png" alt="" id="fadeIn"> </section> <section> <div class="inner-wrapper"> <h2>Apply Fade In/Out effects</h2> </div> </section> <section id="unstick"> <div class="inner-wrapper"> <h2>Set custom "unstick" points</h2> </div> </section>

3. JAVASCRIPT

$(function() $('nav').stkr( startSticky: '#unstick', endSticky: 'footer', stickyPosition: 'custom', top: 0, left: 0 ) $('#parachute').stkr( offsetUnstick: 200 ); $('#setStart').stkr( startSticky: '#sticky1', endSticky: '#unstick', stickyPosition: 'top-right', toggleVisibility: true ); $('#fadeIn').stkr( startSticky: '#sticky2', endSticky: '#unstick', offsetUnstick: -200, stickyPosition: 'custom', top: '40%', left: '40%', toggleFade: true ); );

4. OPTIONS

By default, the sticky element remains fixed at the top-left corner for the entire length of your web page, with its top and left properties set to 20px.

position: fixed, top: 20px, left: 20px

Set custom start and end points

startSticky: A string identifying the name, ID, or class of an element. When the user scrolls to this point, the sticky element becomes fixed on the page. If using an ID as the selector, include the hashtag in the string (e.g., ‘#idName’). If using a class name, include the dot (e.g., ‘.className’) in the string. Default value: ‘body’.

endSticky: A string identifying the name, ID, or class of an element. This marks the end of the fixed element’s designated “sticky zone”. If this is not set, the element will remain fixed for the remaining length of the document. If using an ID as the selector, include the hashtag in the string (e.g.,’#idName’). If using a class name, include the dot (e.g., ‘.className’) in the string. Default value:’null’.

offsetStick: An integer that offsets the point at which the element becomes fixed on the page.

offsetUnstick: An integer that offsets the point at which the element is no longer fixed on the page.

Adjust position of fixed element(s)

stickyPosition: A string that determines where the fixed element is positioned on the page. Accepted values: ‘top-left, ‘top-right,’bottom-left,’bottom-right,’custom’

top, right, bottom, left: If stickyPosition is set to ‘custom’, adjust the element’s top, right,bottom, and/or left properties to place it in the desired position. Accepted values: Integer if using pixels (e.g., 30) or string if using percentages (e.g., ‘30%’).

$('#idName-1').stkr( stickyPosition: 'custom', top: '50%', left: 40 );

Extras

toggleVisibility: Set to false by default. Setting this to true will make the element disappear from the page when it is not between its designated start and end points.

toggleFade: Applies a fade in/fade out effect on the fixed element as it enters or leaves its designated sticky zone. Set to false by default. If changed to true, you can use CSS transition to adjust the duration of the effect.

#sticky -webkit-transition: opacity 0.2s; transition: opacity 0.2s;