jQuery Footer Hanging Bar

Hi, today i am going to tell you about how to place a footer hanging message bar with jQuery in your website, this footer bar will display at end of the bottom and it will scroll as par the scrolling the window, you can also close the message bar by clicking close button. it is just few lines of code let's see how we do this

HTML

take one div and give it ID name like #footer_box inside the div take one close image and give a ID name like #closeBtn and keep some text message as you like.

<div id="text"></div>


<div id="footer_box">
<img id="closeBtn" style="float:right;cursor:pointer;"  src="close.png" />
<strong>Lessoncup</strong>
  <p>it is a arena to learn web technologies like jQuery, Ajax, CSS, php, Mysql, JavaScript from basic level to advanced level. visit me @ <a href="http://www.lessoncup.com">www.lessoncup.com</a></p>
</div>

CSS

write the style to footer box DIV

<style>

#text{ width:900px; height:900px;}

#footer_box{ position: absolute;left:0;background:#ffc;padding:5px;border:1px solid #CCCCCC;text-align:center;
width:99%;color:#0000FF;}
</style>

JAVASCRIPT

here write the scroll function to window inside the function get the top position of window by using scrollTop() method and get the window height using height() method, now animate the #footer_box div using animate() method from top position and keep the animation speed

write the click function on closeBtn to close the footer message box

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(){
 
 $(window).scroll(function(){
  
  var scrollPos=$(window).scrollTop()+$(window).height();
  
        $('#footer_box').animate({top:scrollPos-86+"px" },{queue: false, duration: 500});  
  
 });
 
 
 $('#closeBtn').click(function(){
  
  $('#footer_box').animate({ top:"-=10px",opacity:0 }, "slow");
  
 });
 
});

</script>

Live Demo   Download Script