맛집 여행 캠핑 일상 생활

jQuery 스크롤 따라 움직이는 레이어 본문

jQuery

jQuery 스크롤 따라 움직이는 레이어

영은파더♥ 2016. 3. 21. 16:18

jQuery 스크롤 따라 움직이는 레이어


스크롤을 아래나 위로 움직이더라도 항상 우측에 보이도록 하는 jQuery

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>

$(document).ready(function(){

$(window).scroll(function(){

$('#sidebarLayer').css('top',$(window).scrollTop()+50);

});

});

</script>


<div id="sidebarLayer" style="position:absolute;right:0;top:50px;width:100px;height:100px;border:1px solid #ff0000;text-align:center;background-color:#FFFFFF;z-index:1000;">

스크롤 따라 움직이는 레이어

</div>


스크롤 따라 움직이는 레이어



▶ 샘플소스

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

<script>

$(document).ready(function(){

$(window).scroll(function(){

$('#sidebarLayer').css('top',$(window).scrollTop()+50);

});

});

</script>

</head>

<body>

<div id="sidebarLayer" style="position:absolute;right:0;top:50px;width:100px;height:100px;border:1px solid #ff0000;text-align:center;background-color:#FFFFFF;z-index:1000;">

스크롤 따라 움직이는 레이어

</div>

<p><br /></p>

<p><br /></p>

<p><br /></p>

</body>

</html>

위 코드에서 스크롤바가 생기게 br 태그를 충분히 넣어주면 된다.


Trackback : | Comments :