Home » Tips » JavaScript » Simple floating div using jQuery
/Without any jQuery plugins you can float a html element on your we page.
//Here we are taking example of a div element.
//You can place that div anywhere according to your requirements.
<html xmlns="http://www.w3.org/1999/xhtml">
<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">
body .divMain{
height:6000px !important;
background-color:yellow;
overflow:auto;
}
.divMain #floatDiv {
position:absolute;
left:50%;
margin-top:200px;
margin-left:-200px;
width:200px;
height:200px;
background-color: red;
}
</style>
</head>
<body>
<div class="divMain">
<div id="floatDiv">
</div>
</div>
</body>
</html>
'프로그래밍 > Script' 카테고리의 다른 글
| [javascript] Apy: A library for rest API ajax calls (0) | 2014.05.21 |
|---|---|
| [javascript] 메세지 없이 브라우저를 닫고 싶을때. self.close() 외 2 방법 (0) | 2014.05.19 |
| 최근 인기를 얻고 있는 JavaScript 라이브러리 정리 (0) | 2014.05.08 |
| [javascript] PourOver: Fast filtering and sorting of large collections (0) | 2014.04.29 |
| jquery ui에서 datepicker 사용할 때, input 뒤에 달력 이미지 넣는 부분 (0) | 2014.04.21 |