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>


Ask Questions

Ask Question