#sticky elements

A Sticky Element is an element by which the user scrolls over a page on a Website and stays sticky on one of the elements on the page. It means that, if your visitor visits your Website page and scrolls down where he wants but some of the elements of your Website don’t move or stay on their position fixed. The content of your website as a sticky element will always be attractive and visible to…

New Post has been published on http://www.htmluse.com/stickynavbar-js-fancy-sticky-navigation-with-smart-anchor-links-highlighting/

stickyNavbar.js – Fancy Sticky Navigation with Smart Anchor Links Highlighting

Download   Demo

stickyNavbar.js

stickyNavbar.js: Fancy sticky navigation jQuery plugin with smart anchor links highlighting

1. Setup

Include reference to jQuery library, jQuery easing plugin (optional), animate.CSS (optional, not working in < IE9) and stickyNavbar itself at the bottom of the page before the closing body tag:

<!-- this goes inside the header tag--> <link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.0.0/animate.min.css" rel="stylesheet" type="text/css"> <!-- all these references goes before the closing body tag--> <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script> <script src="//cdn.jsdelivr.net/stickynavbar.js/1.3.0/jquery.stickyNavbar.min.js"></script>

2. HTML Markup

Navigation:

<div id="header" class="header"> <nav id="nav"> <ul class="nav navbar-nav"> <li> <a href="#home">Home</a> </li> <li> <a href="#about">About</a> </li> <li> <a href="#services">Services</a> </li> <li> <a href="#contact">Contact</a> </li> </ul> </nav> </div>

Body markup:

<div id="home" class="scrollto"> <!-- Your content goes here --> </div> <div id="about" class="scrollto"> <!-- Your content goes here --> </div> <div id="services" class="scrollto"> <!-- Your content goes here --> </div> <div id="contact" class="scrollto"> <!-- Your content goes here --> </div>

3. CSS:

Add active class into your style.css and style it as you like, eg.:

.active color: #fff !important; text-decoration: underline !important; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); // hardware acceleration of CSS animation

*Note: You can change active class to anything you want and pass your own class into options object of stickyNavbar function *

4. jQuery:

Call stickyNavbar function on the navigation wrapper (.header), nav tag or ul tag either without options object:

$(function () $('.header').stickyNavbar(); );

or with the options object:

New Post has been published on http://www.htmluse.com/makefixed-js-jquery-plugin-to-create-sticky-elements-on-scroll/

MakeFixed.js –jQuery Plugin to Create Sticky Elements on Scroll

Download   Demo

MakeFixed.js is a jQuery plugin to dynamically set up elements to be fixed during scroll. It’s lightweight and allows callback functions.

What’s up?

MakeFixed.js is a quick way to dynamically set up elements to be fixed during scroll.

Lightweight! Less than 2.4KB;

Allow callback functions;

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;

New Post has been published on http://www.htmluse.com/sticky-kit-making-smart-sticky-elements/

Sticky kit - Making smart sticky elements

Download   Demo

Sticky kit provides an easy way to attach elements to the page when the user scrolls such that the element is always visible.

Browser Support

Sticky Kit works with all modern browsers, and IE7+.

Note: only floated columns work in IE7.

1. INCLUDE JS FILES

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script> <script src="$root/src/jquery.sticky-kit.js"></script>

2. HTML

<h1>My Site</h1> <div class="content" data-sticky_parent> <div class="sidebar" data-sticky_column> This is a sticky column </div> <div class="main" data-sticky_column> This is the main column <p class="sub"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam dignissim, augue at consectetur pellentesque, metus ipsum interdum sapien, quis ornare quam enim vel ipsum. </p> <p class="sub"> In congue nunc vitae magna tempor ultrices. Cras ultricies posuere elit. Nullam ultrices purus ante, at mattis leo placerat ac. Nunc faucibus ligula nec lorem sodales venenatis. Curabitur nec est condimentum, blandit tellus nec, semper arcu. Nullam in porta ipsum, non consectetur mi. Sed pharetra sapien nisl. Aliquam ac lectus sed elit vehicula scelerisque ut vel sem. Ut ut semper nisl. </span> <p class="sub"> Curabitur rhoncus, arcu at placerat volutpat, felis elit sollicitudin ante, sed tempus justo nibh sed massa. Integer vestibulum non ante ornare eleifend. In vel mollis dolor. </p> </div> </div> <div class="footer"> My very tall footer! </div>

3. JAVASCRIPT

$("#sidebar").stick_in_parent();

4. OPTIONS

$("#sticky_item").stick_in_parent(options);

options is an optional hash of options to configure how Sticky Kit works. The following options are accepted:

parent — The element will be the parent of the sticky item. The dimensions of the parent control when the sticky element bottoms out. Defaults to the closest parent of the sticky element. Can be a selector.

inner_scrolling — Boolean to enable or disable the ability of the sticky element to scroll independently of the scrollbar when it’s taller than the viewport. Defaults to true for enabled.

sticky_class — The name of the CSS class to apply to elements when they have become stuck. Defaults to “is_stuck”.

offset_top — offsets the initial sticking position by of number of pixels, can be either negative or positive

5. EVENTS

Various events are triggered from a sticky element when its state changes. They are:

sticky_kit:stick — Triggered when element becomes stuck.

sticky_kit:unstick — Triggered when element becomes unstuck. (Note: an element is still considered stuck when it has bottomed out)

sticky_kit:bottom — Triggered when element bottoms out.

sticky_kit:unbottom — Triggered when element is no longer bottomed out.

For example, if we want to log when an element sticks and unsticks we might do:

$("#sticky_item").stick_in_parent() .on("sticky_kit:stick", function(e) console.log("has stuck!", e.target); ) .on("sticky_kit:unstick", function(e) console.log("has unstuck!", e.target); );

Sticky Kit listens to one event on document.body.

sticky_kit:recalc — trigger this event to cause all sticky elements to be recalculated. More information below.

If you want to remove sticky kit from an element after applying it you can send that element a sticky_kit:detach event.

Sticky Kit also listens to an event on the sticky elements:

sticky_kit:detach — remove sticky kit and restore element to original position

For example:

New Post has been published on http://www.htmluse.com/positionsticky-sticky-positioning-polyfill-for-jquery/

positionSticky – Sticky Positioning Polyfill for jQuery

Download   Demo