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.

JavaScript Floating Smart Banner

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.

Download JavaScript Floating Banners

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.

  • Yamil Kisna

    This is really amazing and very functional. Can be used in many places.

    A great post. Thank you.

  • pbijl

    i dont think this is allowed with programs suchs as adsense

  • http://www.nelsonpimenta.com Nelson Pimenta

    Hi there!

    Do you know a way to produce floating fullscreen flash banners over flash enabled websites?

    Thanks in advance,
    Nelson Pimenta

  • http://www.webresourcesdepot.com Umut M.

    @pbijl,
    They musn’t be allowed in Adsense as you said.

    @Nelson,
    Sorry that I never did floating flash banners.

  • http://www.vierdaagsefeesten.eu/ Vierdaagsefeesten

    Unfortunately this doesn’t work with Internet Explorer 6.

  • http://www.webresourcesdepot.com Umut M.

    @Vierdaagsefeesten,

    Yes you are right. I’m just looking at it. The jQuery part seems to work so it must be with the CSS.

  • http://www.softpixel.ro DaR|uS

    Hey, this tutorial doesn’t work in IE 6… why.. did you tested in it?

  • http://www.webresourcesdepot.com Umut M.

    @DaR|uS,

    IE6 does not support CSS “fixed”. It is mentioned at the “compatibility” part.

  • vvvlad

    For some reason it doesn’t work in FF3

  • mike

    what a crap… it does not work in IE6 ))) Its useless…

  • http://www.webresourcesdepot.com Umut M.

    @mike,

    There are ways to make it work in IE6. I just couldn’t add it as I couldn’t find time for that.

    But you can simply add the necessary IE6 CSS fixed hack and make it work.

  • http://www.bizwave.com Morne Wolfaardt

    How resource intensive is this script? I am running a webpage on my localhost with a lot of content, and when viewing in IE7, the page does not scroll smoothly.

  • http://www.webresourcesdepot.com Umut M.

    @Morne,

    I’ve not yet used the code in the production environment & comments are the only feedbacks.

    When I test it the hardest possible at DNSPinger, I see that it did not cause any problems.

    The script is triggered in every scrolling feature so it is frequently used but like said it does not cause problems on my side.

    A clever thing to do can be triggering it in every x seconds when scrolling happens. You may give this a try.

  • fornetti

    I do not believe this

  • george

    Got exactly what my boss was looking for

  • Stefan

    All works good until you scroll up and the ad shall stay against the “smartBannerIdentifier” div , then the ad disappears and seen not until you scroll down again. anyone have the same problem?

  • Tony

    How to stop floating of banner?
    http://slike.hr/slika.php?z=banner22.png

    Please see that picture in link. When i scroll red banner goes over blue container. Can i stop red banner not to go over blue div?

    TNX

  • Lio

    “But you can simply add the necessary IE6 CSS fixed hack and make it work.”

    Could you tell me where can I find this hack? Thank you very much for your time.

  • http://www.webresourcesdepot.com Umut M.
  • http://www.etimesgutemlak.net/ankara_da-sat%c4%b1l%c4%b1k-daire-1-1-il.html mehmet kördemirci

    hello

    smart floating banner don’t work with google adsense. don’t scroll banner this page first load. but another ie 7 window or tab view and turn this page , banner is scrolling.

    why???

  • http://www.webresourcesdepot.com Umut M.

    @mehmet,

    It is hard to findout the reason but I believe it is because of the JavaScript behind Adsense.

    Also, such a usage is not allowed in Adsense so I suggest not applying smart floating banners to Adsense.

  • http://www.etimesgutemlak.net/ankara_da-sat%c4%b1l%c4%b1k-daire-1-1-il.html mehmet kördemirci

    opps , it’s work :)
    this problem source is my css

    thanks a lot

  • http://moovie.hu wintercounter

    NO CSS hack!

    Use Relative position instead of fixed, than you won’t need compatibility to ‘fixed’ in ie.

    Here is the code for:

    $(document).ready(function(){
    $(window).scroll(function(){
    if ($(window).scrollTop() > $(“.smartBannerIdentifier”).offset({ scroll: false }).top){
    $(“.banner”).css(“position”, “relative”);
    $(‘.banner’).css(‘top’, $(this).scrollTop() – $(this).height() + “px”);
    }
    if ($(window).scrollTop() <= $(“.smartBannerIdentifier”).offset({ scroll: false }).top){
    $(“.banner”).css(“position”, “relative”);
    $(“.banner”).css(“top”, 0);
    }
    });
    });
    // modified by wintercounter – MOOvie.hu (Please keep this in your source, in the spirit of OpenSource)

  • lobster mania

    It dont work for me!

    After you scroll.. the scrollable ad will disappear.

    Tested in IE 7 and FF3.

    Any suggestions ?

  • Fred

    hello,

    Original script doesn’t works with jQuery 1.3.2 in IE !
    Anybody knows the solution ?
    Thank you for any help

    Best,

    Fred

  • Christian

    I have this set up here (with jQuery 1.3.2 – and I don’t need to include “” – perhaps that could be what you are looking for, Fred):

    http://www.murphytx-online.com/murphy/eating-out-american.php

    Is there a way to keep the sides from scrolling until they actually need to scroll? And is there a way to keep the left menu from disappearing beyond the bottom of the visible area?

  • http://www.arabiansinbad.com/ shahzad

    http://www.arabiansinbad.com/en/whySinbad.php?PageName=WhySinbad

    i have used it on the link below its working fine as banners are floating.

    but if you guys go to the bottom of the page the banners float out of the container.

    and one more thing while floating can i float them align middle of the page.

    Thanks in advance

  • http://www.webresourcesdepot.com Umut M.

    @shahzad,

    If you add overflow: hidden; CSS property to the element that wraps the banners, the problem “may” disappear.

    For floating “middle”, I’m pretty sure you can by playing with the JS code. You should measure the page’s position on evey scroll and set the position of the baners at the middle.

    I don’t have a ready-to-go code for this. You may need to do some jQuery digging :).

  • http://wpfeed.com Oshik Ernst

    I really love the script. thank you.

    as tony wrote before, i have the same problem, when i need the floating box to stop floating. (when a div from the bottom is arriving) is there a fix for that?

    like here:
    http://slike.hr/slika.php?z=banner22.png

    thank you

  • http://www.indialike.com indialike

    This is really very good functional. Can be used in many places.

    A great post. Thank you.

  • Marik Luidens

    This script is great.

    But when I use it with a flash-banner, the banner will refresh and play the flash animation again. This happens only in FF from the moment the top of the banner hits the top of the window.

    Did anybody found a solution for that ?

  • etrader

    y this code not working with IE7 and jQuery JavaScript Library v1.3.2??? 😐

    its working great with FF

    $(document).ready(function(){
    $(window).scroll(function(){
    if (slipCount>0) {
    if ($(window).scrollTop() > $(“.invest_header”).offset({ scroll: false }).top){
    $(“.floatlayer”).css(“position”, “fixed”);
    $(“#floatlayer”).css(“top”, “0”);
    var leftt = $(“.invest_header”).offset({ scroll: false }).left;
    leftt -= 237;
    $(“#floatlayer”).css(“left”, leftt);
    }
    if ($(window).scrollTop() <= $(".invest_header").offset({ scroll: false }).top){
    $(".floatlayer").css("position", "relative");
    $(".floatlayer").css("top", $(".slip").offset({ scroll: false }).top);
    $("#floatlayer").css("left", "0");
    }
    }
    });
    });

  • http://www.onlythebible.com Emmanuel

    Great stuff! Thanks

  • http://www.provector.dk Jonas

    If you’re using a newer version of jquery then substitute offset with position in the javascript:

    $(document).ready(function(){

    $(window).scroll(function(){
    if ($(window).scrollTop() > $(“.smartBannerIdentifier”).position({ scroll: false }).top){
    $(“.banner”).css(“position”, “fixed”);
    $(“.banner”).css(“top”, “0”);
    }

    if ($(window).scrollTop() <= $(".smartBannerIdentifier").position({ scroll: false }).top){
    $(".banner").css("position", "relative");
    $(".banner").css("top", $(".smartBannerIdentifier").position);
    }
    });

    });

  • Fredrik

    Thanks for the script!

    It works like a sharm with Jonas edit.

  • khubchen

    Sorry Typo for the email address …

    This code works great however, now I have a requirement to get this working within a scrolling div. I’m getting some odd behavior. I am new to Jquery and would appreciate any advice

    Thanks

  • Honza

    Great script, thanks for that.

    I just noticed, that it slows down scrolling in IE8. It is not smooth when I use this script. Can someone help? Is it possible to put there some delay for example to make it work more smoothly?

    Thanks

  • http://www.plasticcardonline.com plastic cards

    dear webmaster,
    how can i install Smart Floating Banners,i copy the code,but it doesn’t work

  • Tomas

    If ad disappear after scroll up in IE, class .banner must have width set:

    .banner {
    width: 200px;
    }

  • http://cms-boutique.com/ Labanino

    For me works perfect, IE7, 8, FF 3.6, Chrome and Safari. But can some on explain me why it doesn’t work with Google Ads?

  • http://www.orlandowebdevelopment.com David

    Google Ads do not work because it would violate Google policies… simple as that. They need to determine how many ads are present on one page. It IS their JS that interferes with the Float script.

  • linkin360

    not working with jquery 1.5

  • Todd

    If this can help anyone, I had an issue with it braking while using jquery-1.4.4. My solution was to call this function:
    offset({ scroll: false })
    like this instead (minus the parameter):
    offset()

  • BlaiD

    Todd THANK YOU!! I was using JQuery 1.6 and wasn’t working.

    Very good script by the way.

  • http://vnweb.org Vietnam Travel Blog

    I have seen this smart banner almost a year and looking for this code til now. Thanks for sharing this great script with completely package of example.

    My question is same with Oshik Ernst but seem there is not answer yet on how to stop scroll before catch the bottom bar for example?

  • http://www.sukabet.com Agen Bola

    How to create floating with Scroll mouse?

  • Paul

    This is working okay, but when using it on a lefthand side column, the banner goes right on top of the content when zooming in on a mobile phones! How do we fix this!?

Search