Smart Floating Banners

Floating a banner or content definitely increases the visibility of them. But have some limitations (which we’ll remove).

In general, floating banners are used when there is no other content at their column as they are always at the "float" (position:fixed) state.

This is a better & smarter solution that will float the banners when needed, re-position them and can be used in any type of banner - content combinations.

And, best of all, you don’t need to set any fixed heights in the code.

We’ll be using jQuery but these simple functions can easily be ported to other JavaScript frameworks.

Before reading further, here are the examples. Check both example 1 and example 2 and scroll down.

Logic of this smart floating banners:

• Position of element (probably div) holding the banners won’t be mentioned as "fixed" in the beginning.
• We insert an identifier element to understand the exact original position of the end of the contents.
• When a user scrolls, with a JavaScript function, we check if the last part of the content is visible or not.
• If not visible, we set the position of the div holding the banner to fixed.
• If visible we re-set the position to relative (or absolute).
• That’s all.

The HTML:

A standard 2 column webpage.

<div class="mainWrap">
    <div class="leftWrap">contents</div>
    <div class="rightWrap">
        <div class="banner">banner</div>
        <div class="smartBannerIdentifier"></div>
    </div>
</div>

The CSS:

The important part is, we are not setting CSS "fixed" position to the banner.

.mainWrap {
    width: 500px;
    margin: 0 auto;
}
.leftWrap {
    float: left;
    width: 250px;
    background-color: #CCCCCC;
}
.rightWrap {
    float: right;
    width: 250px;
    background-color:#666666;
}
.banner {
    width: 250px;
    background-color: #FF0000;
}

JavaScript:

We have a function which simply:

• Understands if the scrolled amount is bigger than the "smartBannerIdentifier" which defines the end of contents.
• If yes, sets the CSS position of the banner to fixed.
• If no, sets the CSS position of the banner to relative and "top" to the original value using the smartBannerIdentifier’s offset value.

$(document).ready(function(){
  $(window).scroll(function(){
    if  ($(window).scrollTop() > $(".smartBannerIdentifier").offset({ scroll: false }).top){
      $(".banner").css("position", "fixed");
      $("#banner").css("top", "0");
    }
   if  ($(window).scrollTop() <= $(".smartBannerIdentifier").offset({ scroll: false }).top){
      $(".banner").css("position", "relative");
      $(".banner").css("top", $(".smartBannerIdentifier").offset);
    }
   });
});

Dependencies:

JavaScript function used requires some objects from jQuery 1.2.6+. For lower jQuery versions, you’ll need the dimensions plugin.

Using this JavaScript floating banners you can:

• Definitely show your banners or content more with a simple non-flickering method.
• Order your contents and banners in any way and it will work.
• Can do some special tricks like adding effects when they begin to float or else.

Script is tested on major browsers at Windows OS. I’m not sure about the compatibility on Mac and others but must be ok as it uses standard jQuery functions. If you live any problems, just share them at the comments.

P.S. Download includes 2 example files.