-
스크롤에 따라서 움직이는 광고 베너 만들기! 웹 공부 ! 2018. 4. 23. 18:31
쇼핑몰 또는 일반 회사 사이트를 보면 스크롤에 따라서 움직이는 광고 베너를 볼 수있다.
position : fixed를 할 수도 있지만 좀 더 동적인 느낌이 나도록 하기 위해서 jquery를 사용 했다.
hmtl 코드
<div class="fly">
</div>
css 코드
.fly {
position: absolute;
top: 0px;
left: 90%;
width: 80px;
height: 200px;
background: #f00
}
jquery
$(function() {
$(window).scroll(function(){
var sct = $(this).scrollTop();
//console.log(sct);
$('.fly').stop().animate({
top: sct
})
})
})
'! 웹 공부 ! ' 카테고리의 다른 글
widnw (브라우저 창 ) 넓이알아오기 (0) 2018.05.01 햄버거 버튼 만들기 (0) 2018.04.18 bootstrap (0) 2018.04.05 지정된 html파일 에만 css 주는 방법 (0) 2018.04.03 고정 헤더에 맞게 html 앵커 오프셋 (0) 2018.03.29