제이쿼리 div 이동 관련 문의드려요!
본문
http://wakamsha.github.io/dev.cm/jhc-study/06/3-setposition-xy.html
위 사이트에서 보시면 스크롤시 item1~5 까지 객체를 이동시키는 기능을 하는데요
이게 스크롤 값에 영향을 받아서
스크롤이 있다면 무한정 이동을 해버립니다.
혹시 이동값의 한계를 둘수 있을까요?
예를들어 item1 개체는 1000px 이상 스크롤하면 더이상 움직이지 않도록 했으면 좋겠구요 ㅠㅠ
가능하다면 1000px 이상 움직였을때 item1 의 fixed 속성이 absolute 나 기타 다른속성으로
변환되었으면 합니다 ㅠㅠ
그래서 스크롤 하면 위쪽으로 사라질 수 있게요
sir 능력자님을 기다려봅니다 ㅠㅠ
CSS 입니다.
body {
}
h1 {
font-size: 100%;
}
.indicator {
position: fixed;
right: 10px;
top: 10px;
}
li {
display: block;
height: 60px;
position: fixed;
top: 40px;
width: 60px;
}
#item1 {
background: #000;
left: 20px;
}
#item2 {
background: #333;
left: 100px;
}
#item3 {
background: #ff358B;
left: 180px;
}
#item4 {
background: #01b0f0;
left: 260px;
}
#item5 {
background: #aeee00;
left: 340px;
}
JS입니다
$(function() {
});
var left1 = $('#item1').offset().left; //Item1 x 좌표 값
var left2 = $('#item2').offset().left; //Item2 x 좌표 값
var left3 = $('#item3').offset().left; //Item3 x 좌표 값
var left4 = $('#item4').offset().left; //Item4 x 좌표 값
var left5 = $('#item5').offset().left; //Item5 x 좌표 값
var left6 = $('#item6').offset().left; //Item6 x 좌표 값
$(window).scroll(function() {
var value = $(this).scrollTop(); //스크롤 값을 가져옵니다.
$('#scrollValue').text(value);
//얻은 스크롤 양을 사각형의 XY 좌표 값 지정
//스크롤 값을 나누어 거리를 낸다
$('#item1').css({'top': top + value / 4});
$('#item2').css({'top': top + value / 5, 'left': left2 + value / 8});
$('#item3').css({'top': top + value / 6, 'left': left3 + value / 6});
$('#item4').css({'top': top + value / 8, 'left': left4 + value / 5});
$('#item5').css({'left': left5 + value / 4});
$('#item6').css({'left': left6 + value / 3});
});
});
!-->!-->
답변 1
if(value <= 1000) {
$('#item1').css({'top': top + value / 4, 'position':'fixed'});
} else {
$('#item1').css({'position':'absolute'});
}
왜 absolute로 하려는지는 모르겠지만 1000px 이상일 경우에 absolute로 바꿔 주게 하려면 저리 하면 됩니다.
!-->
답변을 작성하시기 전에 로그인 해주세요.