How to Add Floating Sidebar Banner Ads Scroll in JQuery + CSS
Do you want to add banner ads on your website and make those ads scrollable along with page scroll this is good idea to make your ads more visible to visitors. By default when ever user scroll page ads will hide but you write few line for javascript and CSS code to make your left and right ads panel scrollable with page scroll.
Integrate Floating Sidebar Banner Ads Scroll
Libraries
Load required libraries on page from CDN
<script src="http://code.jquery.com/jquery-1.11.3.min.js">script> <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js">script> |
HTML
Create left and right sidebar div container and put you ad code there which act like sticky floating sidebar.
|
Ads Left
Ads Right
CSS
Add CSS on page for styling left and right sticky floating sidebars.
.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; } |
JS
Now add following javascript on page to make your sidebar ads scrollable.
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; zindex( $('#wrapper').outerWidth() ); $window.on('resize', function() { zindex( $('#wrapper').outerWidth() ); }); function zindex(maxWidth){ if( $window.width() <= maxWidth + $wiBanner ) { $banner.addClass('zindex'); } else { $banner.removeClass('zindex'); } } }); |
See live demo and download source code.