<!DOCTYPE html>
<html lang="ko" class="main">
<head>
<title> 따라다니는 배너 </title>
<!-- jquery 최근 버전 사용 -->
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<!-- 따라다니는 배너 스크립트 -->
<script type="text/javascript">
$(document).ready(function() {
// 기존 css에서 플로팅 배너 위치(top)값을 가져와 저장한다.
var floatPosition = parseInt($("#floatMenu").css('top'));
var floatPosition2 = parseInt($("#floatRight").css('top'));
// 250px 이런식으로 가져오므로 여기서 숫자만 가져온다. parseInt( 값 );
$(window).scroll(function() {
// 현재 스크롤 위치를 가져온다.
var scrollTop = $(window).scrollTop();
var newPosition = scrollTop + floatPosition + "px";
var newPosition2 = scrollTop + floatPosition2 + "px";
/* 애니메이션 없이 바로 따라감
$("#floatMenu").css('top', newPosition);
*/
/* 애니메이션 따라감 */
$("#floatMenu").stop().animate({
"top" : newPosition
}, 500);
$("#floatRight").stop().animate({
"top" : newPosition2
}, 500);
}).scroll();
});
</script>
</head>
<style type="text/css">
/* 우측 따라다니는 메뉴*/
#floatRight {
position: absolute;
width: 150px;
right: 2%;
top: 150px;
z-index:9999;
}
</style>
<body data-pgCode="0000">
<!-- 따라다니는 배너 -->
<div id="container" class="hidden-xs">
<div id="floatRight">
<a href="#" target="_blank()"><img src="image.jpg"></a>
</div>
</div>
<!-- 따라다니는 배너 -->
<div style="height:2000px;">
</div>
</body>
</html>
위 소스는 우측 상단쯤에 항상 따라다니는 배너를 만드는 소스입니다.
홈페이지 제작할때 엄청 많이 사용하곤 하는데
항상 소스를 찾아서 하다가 걍 이곳에 뒀다가 쓰려고
이렇게 블로그에 남깁니다. ㅎㅎ;;
필요하신분들 가져가서 사용하시길요!~
'홈페이지제작' 카테고리의 다른 글
| css 자동줄바꿈 (0) | 2022.10.19 |
|---|---|
| css 마우스 오버 버튼 효과들 (0) | 2022.10.11 |
| CSS 마우스 오버 이미지 확대 (0) | 2022.10.05 |
| 청주 홈페이지제작 (주)이씨온플러스 (0) | 2021.04.20 |
| 청주 홈페이지제작(서플라이아미 쇼핑몰) (0) | 2021.04.13 |
