stick message even when user scrolls down or up

Sat Jan 19, 2013 1:51 am

stick message even when user scrolls down or up , the message remains appearing to him . it is called stick (fixed ) popup message. Can used for footer too using JQuery.
javascript code

<html>
<head>
<title>stick message </title>
 <!--
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
 Note you can download the JQuery package instead of using Google version. -->
<script src="jquery-1.8.3.js"></script>
 <script>
      //MsgStick stick
	   jQuery(document).ready(function($){
    $(window).bind("load", function() {
     
    var MsgStickHeight = 0,
    MsgStickTop = 0,
    $MsgStick = $("#MsgStick");
     
    positionMsgStick();
     
    function positionMsgStick() {
    MsgStickHeight = $MsgStick.outerHeight();
 
    MsgStickTop = ($(window).scrollTop())+"px";
	 
     //$(document.body)
    if ( ($("document.body").height()+MsgStickHeight) < $(window).height()) {
	 
    $MsgStick.css({
    position: "absolute",
    top: MsgStickTop,
	left:'550px'
     });
    } else {
    $MsgStick.css({
    position: "static",color: "Yellow",background: '#0505C0'
    });
    }
    };
    $(window)
    .scroll(positionMsgStick)
    .resize(positionMsgStick);
     
    });
	});
</script>
 
<style type="text/css">
html { background: #fafafa; }
 
#myDiv
{
 
border: 1px solid #11e;
 
}
 
 #MsgStick
{
 border: 1px solid #11e;
width:300px;
height:150px;
background: #faCaCa;
 
}
#myDiv { width: 500px; }
</style>
 
</head>
 <body>
 <div id="myDiv">

        <center>
  
	   <p>Some text data.</p>
	   <p>Some text data.</p>
	   <p>Some text data.</p>
	   <p>Some text data.</p>
 
	   <p>Some text data.</p>
	   <p>Some text data.</p>
	   <p>Some text data.</p>
	   <p>Some text data.</p>
  
  
	   <p>Some text data.</p>
	   <p>Some text data.</p>
	   <p>Some text data.</p>
	   <p>Some text data.</p>
 
	   <p>Some text data.</p>
	   <p>Some text data.</p>
	   <p>Some text data.</p>
	   <p>Some text data.</p>
	   
	   <p>Some text data.</p>
	   <p>Some text data.</p>
	   <p>Some text data.</p>
	   <p>Some text data.</p>
 
	   <p>Some text data.</p>
	   <p>Some text data.</p>
	   <p>Some text data.</p>
     </center>
</div>
   <p id="MsgStick"> I am a MsgStick, stick message appears here.</p>
</body>
</html>

stick message even when user scrolls down or up

stick message even when user scrolls down or up

Topic Tags