마우스 스크롤할 때 aside가 따라서 움직이게 하고 싶습니다.
본문
그누보드 5.3.1.2 를 사용하고 있습니다.
기본 베이직 테마의 오른쪽 aside 부분을 마우스 스크롤 할 때 같이 따라서 움직이게 하고 싶어서 작업 중입니다.
스크립트는 아래를 추가 하였고
<script>
$(window).scroll(function(){
var sticky = $('#aside'),
scroll = $(window).scrollTop();
if (scroll >= 170) sticky.addClass('fixed');
else sticky.removeClass('fixed');
});
</script>
fixed 라는 css 속성은 아래와 같이 추가 했습니다.
.fixed {position: fixed; top:0; z-index:90; float: right; height:500px;}
위처럼 추가하고 마우스 스크롤 하면 우측 aside 부분이 왼쪽으로 이동되어 스크롤 됩니다.
aside가 위치변경없이 스크롤 되게 하려면 어떻게 css를 수정해야 할까요?
답변 2
.fixed {position: fixed; top:0; z-index:90; float: right; height:500px;}
에서 left 옵션을 넣어 원하는 위치에 잡으시면됩니다.
.fixed {position: fixed; top:0; left:1200; z-index:90; float: right; height:500px;}
이런식으로요 숫자 변경하시면서 위치 잡으세요.
정확한거는 사실 <div id="container"> 위치와 width를 계산해서 바로 옆에 붙이는게
좋겠으나 5.3버전에서는 위에 정도 해주셔도 큰 문제는 없을 듯 하네요.
감사합니다. 의외로 너무 쉽게 해결되서 좋습니다 ㅎㅎ
left:1064px; 하니 딱 맞네요^^
아....제가 착각했습니다. ㅠㅠ
말씀하신 대로 적용 했을 떄
브라우저 창의 크기를 변경할 때 마다 aside 의 위치가 바뀌는군요. ㅠ_ㅠ
그렇다면 계산을 계속 해줘서 대응해야하는데 혹시 반응형테마 쓰시나요?? 아님 기본 테마 쓰시나요??? 소스는 어느 페이지에 넣으셨는지 알려주세요. 제가 한번 계산해서 코딩해볼께요.
감사합니다. 별이뉨 ㅠ_ㅠ
테마는 그누보드 5.3.1.2 기본테마입니다.
스크립트는 /theme/basic/tail.php 에 넣었으며
css는 /theme/basic/css/default.css 에 추가했습니다.
답변 새로 달았습니다. 확인하세요.
2018-05-09 21시 18분에 수정해서 올렸습니다.
해상도에 따른 스크롤시 위치 잡기
스크롤 뿐만 아니라 화면창이 변경될때도 자리잡게 코드 추가 했습니다.
전 우선 이렇게 해서 해결했습니다.
밑에 875를 적절하게 수정해보세요.
2018-05-09 21시 18분에 수정해서 올렸습니다.
화면창이 변경될때도 자리잡게 코드 추가 했습니다.
<style>
.fixed {position: fixed; left:875px; top:0; z-index:90; float: right; height:500px;}
</style>
<script>
$(window).scroll(function(){
var sticky = $('#aside'),
scroll = $(window).scrollTop();
if (scroll >= 170){
sticky.addClass('fixed');
console.log("aaaaa : "+ $('#wrapper').width());
if($('#wrapper').width() > 1200){
var left = $('#wrapper').width() - 1200;
$(".fixed").css("left",(left/2)+875);
}else{
$(".fixed").css("left",875);
}
}
else
sticky.removeClass('fixed');
});
$(window).resize(function(){
if($('#wrapper').width() > 1200){
var left = $('#wrapper').width() - 1200;
$(".fixed").css("left",(left/2)+875);
}
}).resize();
</script>
너무 감사합니다. 별이뉨.
적용해봤더니 완벽하게 됐습니다.
소중한 시간 내어주셔서 다시 한번 감사드립니다.