본문 바로가기
[Program]/[Html & Javascript]

스크롤 따라다니는 이미지.^^

by 봉필v 2014. 4. 15.

따라 다니는 퀵메뉴 만들기


<!-- 퀵 메뉴 -->

<div style="float:right; top:50px; position:absolute; z-index:10; left:750px;" id="floater">

퀵메뉴에 들어갈 아이템 영역!!!

</div>


<!-- 퀵 메뉴 -->

<script language="javascript"type="text/javascript">

var lastScrollY = 0;

$(function(){

var diffY = document.documentElement.scrollTop;

// scroll event

$(window).scroll(function(){

var diffTop = Math.max(document.documentElement.scrollTop, document.body.scrollTop);

if (diffY != lastScrollY) {

percent = .10 * (diffY - lastScrollY);

if (percent > 0) {

percent = Math.ceil(percent);

} else {

percent = Math.floor(percent);

}

diffTop = parseInt($("#floater").offset().top) + percent;

lastScrollY = lastScrollY + percent;

}

$("#floater").stop();

$("#floater").animate({"top": diffTop}, 500);

});

});

</script>