Create Floating Bar Like Gmail and Facebook

Nowadays, use of floating bars is common in web designs. As far as I remember, Google and Facebook were the first among the prominent websites to have used such a floating bar. If you’re wondering what is a floating bar, well, it is basically a DIV element that stays st fixed position all the time. Even if website visitor scrolls the page, the floating bar remains fixed. This helps in constantly keeping certain content in user’s view.

Many people ask me about how to create a Facebook like floating bar. Although it is a bit jerky but the technique quite useful in keeping certain portion of the web page always in front of user’s eyes.

It is pretty easy if you want to create a floating bar that touches any of the screen edges, left, right, top or bottom. Just create the bar using a DIV element and float it using position:fixed CSS rule. In addition, you can use right: 0 and bottom: 0 for placement of your bar. For example:

.my-floating-bar{
position: fixed;
bottom: 0;
}

This CSS code will give you floating bar placed at the bottom edge of the screen.

Use the following method if the portion-to-be-floated is located somewhere in the middle of the web page and you want to make the bar float only when user scrolls the screen.

IMPORTANT: This technique makes use of jQuery. Your website must include jQuery library before you use this technique. WordPress and many other CMS already come loaded with jQuery. Check the documentation of you blogging or CMS platform.

If your website does not have jQuery -paste the following line in the HEAD section of your webpage to include the library:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>

This code fetched the jQuery library from Google servers and load as part of your web page.

Now here are the codes for creating floated content.

HTML code

<div id="my-float-container">
    <div id="my-float">
...content comes here...
    </div>
</div>

CSS rules

#my-float-container {
...define styles like width and height for container...
}

#my-float {
overflow: hidden;
z-index: 1;
...keep the above two styles and add more as need be...
}

#my-float.floating {
    position: fixed;
    top: 0;
    box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.25);
    -moz-box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.25);
    -webkit-box-shadow: 0 4px 2px -1px rgba(0, 0, 0, 0.25);
}

JavaScript code

$(document).ready( function() {

    $(window).scroll( function() {
        if ($(window).scrollTop() > $('#my-float-container').offset().top)
            $('#my-float').addClass('floating');
        else
            $('#my-float').removeClass('floating');
    } );

} );

That’s it!

Enjoy the floating content! BUT let me advise you not to put AdSense ads in such floating segments -because this is against AdSense policy.

I hope this was useful for you. Please feel free to ask if you have any questions on this topic. I will be happy to try and help you. Thank you for using TechWelkin.