0

HC-Sticky – Makes any element on your page float

Ad
hcsticky

Download   Demo

HC-Sticky is a cross-browser jQuery plugin that makes any element on your page float.

It is used for sidebars on long pages, so they can be visible all the time user scrolls down the page, instead of a empty space visitors usually see. It is also used for floating top menus, emphasizing it to the user at all time.

It is designed to be flexible, but very easy to use. HC-Sticky applied to a content makes it fixed on the page and always visible no matter how high the page is, or how high the sticky content is. Its packed with many interesting features in case you need them.

HC-Sticky is compatible with all modern web browsers, including IE7, IE8. It requires jQuery 1.7.1or later to work properly (new version of the plugin not tested).

1. INCLUDE JS FILES

<!-- jQuery -->
<script src="path/to/jquery.js"></script>
 
<!-- HC-Sticky script -->
<script src="path/to/jquery.hc-sticky.js"></script>

2. HTML

<!-- sidebar -->
<aside id="sidebar">
	<div class="widget social">
		<div class="facebook">
			<h4><a href="http://facebook.com/jstutorial" target="_blank">Facebook fan page</a></h4>
			<div class="fb-like-box" data-href="http://www.facebook.com/jstutorial" data-width="320"  data-height="200" data-colorscheme="light" data-show-faces="true" data-header="false" data-stream="false" data-show-border="false"></div>
		</div>
	</div>

	<div class="widget plugins">
		<h4>Featured plugins</h4>
	</div>

	<div class="widget contact">
		<h4>Quick contact</h4>
	</div>

</aside><!-- end sidebar -->

3. JAVASCRIPT

$('#sidebar').hcSticky({
    top: 50,
    bottomEnd: 100,
    wrapperClassName: 'sidebar-sticky'
});

4. OPTIONS

You can set additional options, like distance from top or bottom when to start or stop floating, or even inside element of your sticky content that you want to be top starting point. Great when you have some important widget inside your sidebar that you want to signify.

Property Default Type Description
top 0 int The distance from the top of the Window at which to trigger HC-Sticky.
bottom 0 int The distance from the bottom of the Window at which to glue HC-Sticky.
innerTop 0 int The distance from the top inside of the sticky content at which to trigger HC-Sticky.
innerSticker null jQuery selector Element at which to trigger HC-Sticky instead of top of sticky container. This has higher priority than innerTop option.
bottomEnd 0 int The distance from the bottom of the referring element at which to stop HC-Sticky.
stickTo null jQuery selector / jQuery object Element that represents the reference for height instead of height of the container. Usedocument for top menus.
responsive true boolean When set to true, HC-Sticky will recalculate its dimensions and position on resize.
offResolutions null int / array Set resolutions at which HC-Sticky will turn itself off. If integer is negative, it will turn off below given resolution, if positive it will turn off above it. Example:[-780, 1600]
followScroll true boolean When set to false, sticky content will not move with the page if it is bigger that Window.
className “sticky” string HTML class that will be applied to sticky element while it is floating.
wrapperClassName “wrapper-sticky” string HTML class that is set to wrapper that HC-Sticky creates around your sticky element.
onStart false function Callback function on plugin Start event (when the element starts floating).
onStop false function Callback function on plugin Stop event (when the element stops floating and returns to its normal state).

5. COMMANDS

It also has some additional commands you can use. Example:

1
$(‘#sidebar’).hcSticky(‘off’);
Command Description
stop Stops the sticky while preserving its current position.
off Turnes off the sticky completely.
on Turns the sticky back on after above two commands.
reinit Recalculates sticky size. Useful after altering DOM elements inside sticky.
Filed in: Css / Css3 Plugins & Demos, HTML / HTML5 Plugins & Demos, Jquery Plugins & Demos, Menu & Navigation Tags: ,
Ad

Get Updates

Share This Post

Related Posts

Ad

Leave a Reply

You must be Logged in to post comment.

© 2016 Html Use. All rights reserved.