Smart Floating Banners

29°

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.

If coding is not your strongest point and you want to create a new animated banner, check out Bannersnack. They are the go-to tool for creating top-notch banners.

47 Comments
  1. Reply Yamil Kisna June 23, 2008 at 1:13 AM

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

    A great post. Thank you.

  2. Reply pbijl June 23, 2008 at 2:37 AM

    i dont think this is allowed with programs suchs as adsense

  3. Reply Nelson Pimenta June 23, 2008 at 7:08 AM

    Hi there!

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

    Thanks in advance,
    Nelson Pimenta

  4. Reply Umut M. June 23, 2008 at 9:17 AM

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

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

  5. Reply Vierdaagsefeesten June 25, 2008 at 6:14 AM

    Unfortunately this doesn’t work with Internet Explorer 6.

  6. Reply Umut M. June 25, 2008 at 8:55 AM

    @Vierdaagsefeesten,

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

  7. Reply DaR|uS June 29, 2008 at 6:22 AM

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

  8. Reply Umut M. June 29, 2008 at 9:05 AM

    @DaR|uS,

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

  9. Reply vvvlad July 1, 2008 at 1:19 PM

    For some reason it doesn’t work in FF3

  10. Reply mike August 5, 2008 at 10:41 AM

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

  11. Reply Umut M. August 5, 2008 at 11:37 AM

    @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.

  12. Reply Morne Wolfaardt August 26, 2008 at 3:00 AM

    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.

  13. Reply Umut M. August 26, 2008 at 3:20 AM

    @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.

  14. Reply fornetti August 31, 2008 at 9:19 AM

    I do not believe this

  15. Reply george November 27, 2008 at 1:21 PM

    Got exactly what my boss was looking for

  16. Reply Stefan December 8, 2008 at 8:05 AM

    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?

  17. Reply Tony February 15, 2009 at 2:13 PM

    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

  18. Reply Lio February 28, 2009 at 6:36 AM

    “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.

  19. Reply Umut M. March 4, 2009 at 9:54 AM
  20. Reply mehmet kördemirci March 8, 2009 at 9:17 AM

    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???

  21. Reply Umut M. March 8, 2009 at 9:23 AM

    @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.

  22. Reply mehmet kördemirci May 10, 2009 at 3:13 AM

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

    thanks a lot

  23. Reply wintercounter May 24, 2009 at 3:16 PM

    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)

  24. Reply lobster mania May 28, 2009 at 5:07 AM

    It dont work for me!

    After you scroll.. the scrollable ad will disappear.

    Tested in IE 7 and FF3.

    Any suggestions ?

  25. Reply Fred September 10, 2009 at 4:30 AM

    hello,

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

    Best,

    Fred

  26. Reply Christian September 16, 2009 at 1:10 PM

    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?

  27. Reply shahzad November 2, 2009 at 7:47 AM

    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

  28. Reply Umut M. November 2, 2009 at 7:57 AM

    @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 :).

  29. Reply Oshik Ernst November 19, 2009 at 7:54 AM

    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

  30. Reply indialike December 3, 2009 at 5:54 AM

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

    A great post. Thank you.

  31. Reply Marik Luidens December 10, 2009 at 7:45 AM

    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 ?

  32. Reply etrader December 31, 2009 at 11:54 AM

    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");
    }
    }
    });
    });

  33. Reply Emmanuel August 30, 2010 at 5:56 PM

    Great stuff! Thanks

  34. Reply Jonas October 13, 2010 at 7:06 AM

    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);
    }
    });

    });

  35. Reply Fredrik October 13, 2010 at 3:55 PM

    Thanks for the script!

    It works like a sharm with Jonas edit.

  36. Reply khubchen November 9, 2010 at 11:53 AM

    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

  37. Reply Honza November 30, 2010 at 3:10 PM

    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

  38. Reply plastic cards January 12, 2011 at 10:40 PM

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

  39. Reply Tomas March 3, 2011 at 8:19 AM

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

    .banner {
    width: 200px;
    }

  40. Reply Labanino May 25, 2011 at 6:13 PM

    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?

  41. Reply David June 15, 2011 at 12:52 PM

    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.

  42. Reply linkin360 August 21, 2011 at 6:59 PM

    not working with jquery 1.5

  43. Reply Todd September 8, 2011 at 6:25 PM

    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()

  44. Reply BlaiD October 5, 2011 at 10:58 AM

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

    Very good script by the way.

  45. Reply Vietnam Travel Blog January 13, 2012 at 11:16 AM

    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?

  46. Reply Agen Bola February 27, 2012 at 10:47 PM

    How to create floating with Scroll mouse?

  47. Reply Paul June 26, 2013 at 10:47 PM

    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!?

Leave a reply

Search