Web Hosting Geeks | Web Hosting Experts
Need help? Call us 1(866)TOP-HOST

14217 reviews 1686 hosting providers

Questions & Answers

Creating a floating message box using jQuery

May 9, 2012 by Susan3
hi all
I want to display floating message box on the top of the browser using jQuery. I want the message box to always be displayed at the top of the browser even if I scroll down. Can anyone help please?

1 Answer

0 votes
May 9, 2012 by SmartHost
HTML code for floating message box using jQuery
<div id="message_box">
    <img id="close_message" style="float:right;cursor:pointer" src="12-em-cross.png" />
    The floating message goes here
</div>

jQuery code for floating message box
//scroll the message box to the top offset of browser's scrool bar
$(window).scroll(function()
{
  $('#message_box').animate({top:$(window).scrollTop()+"px" },{queue: false, duration: 350});
});