제이쿼리 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로 바꿔 주게 하려면 저리 하면 됩니다.
고맙습니다 왕계란님!
정말 많은 도움이 되었어요 ㅠㅠ
열심히 공부할께요!!!
이유는 1000px 이상 스크롤되면 fixed 속성이 none 으로 바뀌어서 스크롤시 위로 올라가게
하려고 하는거에요^^
제 설명이 이상했네요^^;;
왕계란님..
큰일났습니다 ㅠㅠ
위 방법대로 item 에 static 을 부여하니
item1 이 화면에서 사라졌어요..
나중에보니 원래의 item1 초기 위치로 돌아갔던거였어요..
당연히 fixed 가 아니니 스크롤되었을때 화면에서 사라졌던 것이구요..ㅠㅠ
제 의도는..
스크롤 내리다다가 움직이던 item1 이 1000px 이상 가게되면 그자리에 스탑!
되는거였는데..
스크롤을 신경쓰면서 정작 스크롤후 원래 위치를 생각못하다니 ㅠㅠ
어떻게 방법이 없을가요?
if(value <= 1000) $('#item1').css({'top': top + value / 4});
고맙습니다 ㅠㅠ
그리고 감사합니다!!
자꾸 귀찮게 해서 죄송합니다..
부탁드리기전에 검색도 해보고 응용도 해봤지만ㅠㅠ
지금까지 하다 안되어 다시 문의드려요.,..
멈추는거랑. 방향을 알게되었구
응용해서 none 값과 block 을 해서 사라지는것까지 했는데요 ㅠㅠ
특정 픽셀 이후부터 움직이게 하는건 어떻게 해야할까요 ㅠㅠ
예를 들어 1000 픽셀 이후부터 움직여라..
이런거요 ㅠㅠ
top 값을 달리하면 될것 같은데..
모르겠어요 ㅠㅠ
자꾸 귀찮게 해드려 죄송합니다.
참고로
if(value >= 1000) { $('#item6').css({'top': value / 5}); }
로 하면 1000 픽셀 스크롤 후 item6이 움직이긴 하는데
1000픽셀 이전에 값들이 더해져서 움직입니다..
var value = $(this).scrollTop(); //스크롤 값을 가져옵니다.
이 변수가 있습니다.
당연히 지금까지 움직인 게 1000px이라면 거기에서 값이 시작이 되겠지요.
if(value >= 1000) {
value = value - 1000;
$('#item6').css({'top': value / 5});
}
이런 식으로 하게 되면 1000이 빠진 값에서부터 시작하겠네요.
오늘의 질문글이 부끄러워지는 그날까지
열심히 정진하겠습니다.
감사합니다! 건강하세요^^
혹시요...
1000픽셀 이후에 움직이고 2000픽셀 이후에 멈추는건 가능할까요?
if (value >= 1000) { value = value - 1000;
$('#item5').css({'left': left1 + value / 8}); // 1000 이후에 움직여라
}
if(value <= 2000) {
$('#item5').css({'left': left1 + value / 8}); // 2000 이상이면 멈춰라
}
당연히 이렇게 적용하면 다 될줄알았는데 ㅠㅠ
속성값은 다 되는데
위치값은 안되나봐요 ㅠㅠ 갑자기 멘붕이 ㅠㅠ
if (value >= 1000 && value <= 2000) {
var v = value - 1000;
$('#item5').css({'left': left1 + v / 8}); // 1000 이후에 움직여라
}
와 진짜 빠른답변 고맙습니다!!
