How to Add Floating Sidebar Banner Ads Scroll in JQuery + CSS

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.


 Add Floating Sidebar Banner Ads Scroll in JQuery + CSS

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.

<div id="banner_l" class="banner">
 Ads Left
</div>
<div id="banner_r" class="banner">
  Ads Right
</div>

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.

DEMO | DOWNLOAD