1. Place on <HEAD>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(){
//on window scroll fire it will call a function.
$(window).scroll(function () {
//after window scroll fire it will add define pixel added to that element.
set = $(document).scrollTop()+"px";
//this is the jQuery animate function to fixed the div position after scrolling.
$('#floatDiv').animate({top:set},{duration:1000,queue:false});
});
});
</script>
<style type="text/css">
#floatDiv {
position:absolute;
left:10%;
margin-top:200px;
margin-left:-200px;
width:200px;
height:200px;
background-color: red;
}
</style>
2. Place on <BODY>
<div id="floatDiv">
... content here ....
</div>
Note : The scripts can also put in your posts
Demo : Scrool Down Up and Look red box on left page
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script language="javascript">
$(document).ready(function(){
//on window scroll fire it will call a function.
$(window).scroll(function () {
//after window scroll fire it will add define pixel added to that element.
set = $(document).scrollTop()+"px";
//this is the jQuery animate function to fixed the div position after scrolling.
$('#floatDiv').animate({top:set},{duration:1000,queue:false});
});
});
</script>
<style type="text/css">
#floatDiv {
position:absolute;
left:10%;
margin-top:200px;
margin-left:-200px;
width:200px;
height:200px;
background-color: red;
}
</style>
2. Place on <BODY>
<div id="floatDiv">
... content here ....
</div>
Note : The scripts can also put in your posts
Demo : Scrool Down Up and Look red box on left page
RED BOX...
RED BOX...
RED BOX...
RED BOX...
RED BOX...
