Page created automatically by LyraT4 System

Features

Usage

Include the JS

JavaScript:


	 						<script src="jquery.flxStickTo.min.js"></script>

Initialize

JavaScript:


	 						$(function(){

$(this).flxStickTo($(".stickyBars"), options);

});

Options

Property	default	Description
zIndex	400	Z-level of sticking bars (css value)
type	false	possible values fixed: Sticky bars are fixed at the top of <body> or specified <div>. floating: Sticky bars do not fill the whole width of the respective container. false: Bars stick to the top while scrolling the container. They are in Block mode.
debug	false	If set to true, there will be debug outputs in the browsers developer console window.
stopover	false	If more than one sticking bar is defined, only the last sticking will be displayed.

Callbacks

Callback	Params	Description
fnStick	containerNode, $element	This callback is invoked when a bar is going to stick to the border.
fnUnstick	containerNode, $elementode	This callback is invoked when a sticking bar is going to be released to the scrolling area.

Events triggered on bar elements

Event	Params	Description
stick	()	This event occurs when the respective bar is going to stick to the border.
unstick	()	This event occurs when the respective bar is going to be released to the scrolling area.

Special CSS classes

CSS:


	 						/* the .expanded class is added to  sticking area when it contains at least on element */

body>.flxStickTo_env.expanded { background-color: anyOther; }

/* replace "yourDiv" with the id of your container DIV */
#yourDiv_envAnc>.flxStickTo_env.expanded { box-shadow: 4px 4px 3px gray; }

Examples

This Page

The header bar (#bandNavigation) is fixed at the page top.
The "flxStickTo" plugin takes care of the anchor elements.
JS:

JavaScript:


	 						$(document).ready(function(){ 
$(this).flxStickTo($("#bandNavigation"), { type: "fixed", debug: true });
}

Example 2

More than one sticky bars are on a scrollable DIV area.

Error: cannot find element for replacement!

JavaScript:


	 						$(document).ready(function(){	
			
$(".sticky").on("stick", function(){

$(this).css("font-size", "14px");
			
}).on("unstick", function(){

$(this).css("font-size", "");
				
});

$bars= $(".sticky");
			
$("#frameExample").flxStickTo($bars);
$("#frameExample2").flxStickTo($bars, { stopover: true, debug: true }); 				
		
});

CSS

CSS:


	 						#frameExample_envAnc .flxStickTo_env.expanded{ 
 				box-shadow: 4px 4px 3px gray; 
 			}

Requirements

Requires jQuery 1.7+
flxStickTo was tested with several browsers on different devices:

Firefox 40.0
Opera 34.0
Google Crome 49.0
MS Internet Explorer 11.0
iOS Safari
Android 4.4.2