Floating Banner Plugin for jQuery

Floating Banner is a jQuery plugin that simply keeps elements in the browsers viewport when a user scrolls down a web page. It is often used to keep banners in the user's view while the scrolling down long pages.

How to use the plugin?

1. Download jQuery and Download Floating Banner plugin.
2. Reference both the JavaScript and CSS files in the head of the web page and ensure all files are correctly referenced as follows:
   

   <script type="text/javascript" src="jquery.min.js"></script>
   <script type="text/javascript" src="jquery.floatingbanner.min.js">
   </script>
   <link type="text/css" rel="stylesheet" href="floatingbanner.css"
     media="screen" />

3. As a chained jQuery function, you can call the .floatingbanner() function on a jQuery element as below:
   

   $(document).ready(function () {
     $('.banner img').floatingbanner();
   }
   

Demo

You can see a working example of the Floating Banner plugin in the sidebar.

How does it work?

For simplicity, we will refer to the selected elements as banners.

1. The floatingbanner() method initially records the y coordinate of the banner and creates placeholders for each of the banners. The placeholder is used to maintain layout and flow of the document when the banner is later floated.
2. As the user scrolls down the page, the plugin checks to see if the element is still in the browser view.
3. When the banner is out of view, the banner is floated.
4. The banner will return to its original position when the user scrolls back up the web page.

Recommended Use

1. The Floating Banner plugin can be used on any structural HTML element, however it's primarily intended for use on images.
2. Ensure all images have a width and height so the browser can calculate the original position correctly.
3. Do not use the position or float CSS properties on the banner itself. If the banner needs to use these CSS properties, it is best to apply them to a containing div, as shown below:

Example HTML:

<div class="banner">
  <img src="dummy.gif" alt="Dummy Image" />
</div>
<div class="banner">
  <img src="dummy.gif" alt="Dummy Image" />
</div>

Example CSS Code:

.banner {float: left}

Example JS Code:

$(document).ready(function () {
  $('.banner img').floatingbanner();
}

Compatibility

This plugin has been tested using jQuery 1.4.2 and the following browsers:

• Firefox 3.x
• Opera 10.x
• Safari 4.x
• Internet Explorer 6, 7 and 8

Internet Explorer 6 Support

Fixed positioning (position: fixed) is not supported by IE6, an alternate method using absolute positioning is implemented by default. If you wish to disable this disable this support, you can use the following argument:

$(document).ready(function () {
  $('.banner').floatingbanner({ie6: false});
} 

Terms of Use

The Floating Banner plugin for jQuery is Open Source and is free for personal and commercial use. Funke Web Solutions is not liable for any damages or loss of business incurred through the use of this software.

Download the Floating Banner Plugin

The latest version of the Floating Banner plugin for jQuery is hosted on Google Code.

Download Now