Create Sticky Floating Sidebar Ads with jQuery - Banner Scroll
File Size: | 8.93 KB |
---|---|
Views Total: | 13672 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

Banner Scroll is a minimal jQuery script for making floating sidebar ads that stick to the side of the webpage when scrolling down or up.
How to use it:
1. Create left and right sidebar ads for your website.
<div id="banner_l" class="banner"> ... </div> <div id="banner_r" class="banner"> ... </div>
2. The main CSS styles.
.banner { position: absolute; width: 120px; height: 300px; background: url(ads.gif); top: 20px; } #banner_l { left: 5px; } #banner_r { right: 5px; } .zindex { z-index: -999; }
3. Load the jQuery JavaScript library in the document.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
4. Load the jQuery easing plugin for easing functions.
<script src="jquery.easing.min.js"></script>
5. The core JavaScript to enable the sticky floating sidebar ads.
jQuery(document).ready(function($) { var $banner = $('.banner'), $window = $(window); var $topDefault = parseFloat( $banner.css('top'), 10 ); $window.on('scroll', function() { var $top = $(this).scrollTop(); $banner.stop().animate( { top: $top + $topDefault }, 1000, 'easeOutCirc' ); }); var $wiBanner = $banner.outerWidth() * 2; function zindex(maxWidth){ if( $window.width() <= maxWidth + $wiBanner ) { $banner.addClass('zindex'); } else { $banner.removeClass('zindex'); } } });
This awesome jQuery plugin is developed by tronghiep92. For more Advanced Usages, please check the demo page or visit the official website.