Create Sticky Floating Sidebar Ads with jQuery - Banner Scroll

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.