Menu / Sticky element
Simple jQuery plugin to rotate text, rotate images (banners), or any other html.
Options
| Option | Description | Default |
|---|---|---|
| topoffset | in px from top in sticky mode | 75 |
| triggertop | window top trigger (px) | 150 |
| startselector | use a selector as a start point | undefined |
| activeclass | class added to element when active | fg-sticky-active |
| bottomoffset | position it stops | 75 |
| removesize | media query to remove logic | 990 |
| stopselector | element where to stop sticky | footer |
Events
$('.sidebarbox').on('fg.stickycomponent.active', function(e, global, wtop){ // event to indicate component is in sticky mode pass event, plugin globals, $(window).scrollTop() ... }) $('.sidebarbox').on('fg.stickycomponent.normal', function(e, global, wtop){ // event to indicate component is in normal mode pass event, plugin globals, $(window).scrollTop() ... }) $('.sidebarbox').on('fg.stickycomponent.bottom', function(e, global, wtop){ // event to indicate component has hit bottom. ... }) Installation
Add to head of your html document
<script type="text/javascript" src="stickycomponent.min.js"></script>Add your html markup
<html> <head> <script type="text/javascript" src="stickycomponent.min.js"></script> </head> <body> <div class="content"> <div class="container"> <div class="row"> <div class="col-sm-8"> <h1>Sticky Component</h1> </div> <div class="col-sm-4" style="position: relative"> <div class="sidebarbox"> sidebar </div> </div> </div> </div> </div> <footer></footer> </body> </html>Add javascript code for calling the Rotator.
<script type="text/javascript"> $(function(){ $('.sidebarbox').fgStickyComponent({ topoffset: 100, triggertop: $('.content').offset().top }) // might need fix for safari browser, basically takes left of parent component when in fixed mode. $('.sidebarbox').on('fg.stickycomponent.active', function(e, globals, wtop){ var left = $(this).parent().parent().position().left +15; $(this).css({'left': left+'px'}); }) $('.sidebarbox').on('fg.stickycomponent.moving', function(e, globals, wtop){ var left = $(this).parent().parent().position().left +15; $(this).css({'left': left+'px'}); }) $('.sidebarbox').on('fg.stickycomponent.bottom', function(e, globals, wtop){ $(this).css({'left': 'inherit'}); }) $('.sidebarbox').on('fg.stickycomponent.normal', function(e, globals, wtop){ $(this).css({'left': 'inherit'}); }); }) </script>Errata or Issues
If you find and issues please fill out an Issues request https://github.com/sturple/StickyComponent/issues
