Jquery Floating Div Example - Jquery
How to create floating div in jquery?
Snippet Code
Rate this page :
|
[ 0 votes]
|
This jquery snippet code helps you to create a floating div when scrolling on a webpage. The sample code to create a floating div is given below.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$(window).scroll(function () {
set = $(document).scrollTop()+"px";
$('#floatdiv').animate({top:set},{duration:1000,queue:false});
});
});
</script>
<style type="text/css">
body .maindiv{
height:6000px !important;
overflow:auto;
}
.maindiv #floatdiv {
position:absolute;
left:60%;
margin-top:200px;
margin-left:-200px;
width:150px;
height:150px;
background-color: #B40486;
border:1px solid #B40486;
border-radius:35px;
}
</style>
<div class="maindiv">
<div id="floatdiv">
</div>
</div>
