Skip to content

Instantly share code, notes, and snippets.

@hemantajax

hemantajax/floatDiv.html

Created May 1, 2012 07:31
Show Gist options
  • Save hemantajax/2565927 to your computer and use it in GitHub Desktop.
Save hemantajax/2565927 to your computer and use it in GitHub Desktop.
Download ZIP
floating div
Raw
floatDiv.html
<!DOCTYPE html>
<html>
<title>Floating div</title>
<head>
<style type="text/css">
body{
height:1200px;
}
#wrapper{
width:400px;
margin:20px auto;
}
#floatme{
position: absolute;
background-color: green;
width:200px;
height:200px;
border-radius:10px;
line-height:200px;
text-align:center;
color:#fff;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="floatme">
Float me baby
</div>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
(function(){
var name = "#floatme",
divYloc = null;
divYloc = parseInt($(name).css("top"));
$(window).scroll(function () {
offset = divYloc+$(document).scrollTop();
$(name).animate({top:offset},{duration:500,queue:false});
});
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment