사악미소
2018. 4. 23. 10:07
■ CSS :: position 속성을 이용한 쫒아다니는 윙 배너 제작
#01 position : static
-. static은 기본값이다.
-. position:static;이 설정된 엘리먼트는 위치가 지정된 것이 아니다.
-. 정적(static) 엘리먼트는 위치가 지정된 것이 아니라고 표현하며
-. static이 아닌 다른 값으로 지정된 엘리먼트에 대해 위치가 지정됐다고 표현한다.
#02 position : fixed
-. 고정(fixed) 엘리먼트는 뷰포트(viewport)에 상대적으로 위치가 지정되는데, 이는 페이지가 스크롤되더라도 늘 같은 곳에 위치한다는 뜻이다.
-. top이나 right, bottom, left 프로퍼티가 사용된다.
# 소스코드
<html>
<head>
<title>:: 따라오는 스크롤 배너 ::</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<style type="text/css">
.frame {
width:1140px;
margin-left:auto;
margin-right:auto;
}
.main {
float:left;
margin-right:10px;
width:780px;
height:5000px;
}
.box { width:100%;height:1000px; }
.box:nth-child(1) { background-color:#FF9933; }
.box:nth-child(2) { background-color:#66CCCC; }
.box:nth-child(3) { background-color:#9933CC; }
.box:nth-child(4) { background-color:#006699; }
.box:nth-child(5) { background-color:#FF00FF; }
.banner {
float:left;
background-color:#CCCCCC;
width:350px;
height:5000px;
}
#chase {
width:300px;
overflow:hidden;
margin-top:10px;
margin-left:10px;
margin-right:10px;
margin-bottom:10px;
}
#chaseImg {
width:100%;
}
#chaseBar {
width:100%;
background-color:#000000;
color:#FFFFFF;
font-weight:bold;
text-align:center;
}
</style>
<script type="text/javascript">
jQuery(window).scroll(function() {
// 브라우저 화면 스크롤의 현재 높이가 플로팅 배너의 높이보다 클경우
if(jQuery(window).scrollTop() > jQuery(".banner").offset().top) {
jQuery("#chase").css("position", "fixed"); }
// 브라우저 화면 스크롤 현재 높이가 플로팅 배너의 높이보다 작을경우 else if((jQuery(window).scrollTop() < jQuery(".banner").offset().top)) {
jQuery("#chase").css("position", "static"); }
});
</script>
</head>
<body>
<div class="frame">
<div class="main">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
<div class="banner">
<div id="chase">
<img src="./maxim.jpg" id="chaseImg"/>
<div id="chaseBar">새해 福덩이 안지현</div>
</div>
</div>
</div>
</body>
</html> |
# 출력결과
