이전 목록 다음
채택완료

마우스 스크롤할 때 aside가 따라서 움직이게 하고 싶습니다.

토루크막토
프로필 보기이 회원 글보기이 회원의 댓글보기
 2018-05-09 (수) 14:41:36 3,575

그누보드 5.3.1.2 를 사용하고 있습니다.

기본 베이직 테마의 오른쪽 aside 부분을 마우스 스크롤 할 때 같이 따라서 움직이게 하고 싶어서 작업 중입니다.

스크립트는 아래를 추가 하였고

Copy 
<script>
      $(window).scroll(function(){
      var sticky = $('#aside'),
          scroll = $(window).scrollTop();

      if (scroll >= 170) sticky.addClass('fixed');
      else sticky.removeClass('fixed');
    });    
    </script>

fixed 라는 css 속성은 아래와 같이 추가 했습니다.

Copy 
.fixed {position: fixed;  top:0; z-index:90; float: right; height:500px;}

위처럼 추가하고 마우스 스크롤 하면 우측 aside 부분이 왼쪽으로 이동되어 스크롤 됩니다.

aside가 위치변경없이 스크롤 되게 하려면 어떻게 css를 수정해야 할까요?

그누보드5 css
|

답변 2개 / 댓글 6개

채택된 답변
+20 포인트
로로우니
프로필 보기이 회원 글보기이 회원의 댓글보기
 2018-05-09 (수) 15:25:14

.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버전에서는 위에 정도 해주셔도 큰 문제는 없을 듯 하네요.

답변에 대한 댓글 5개

토루크막토
프로필 보기이 회원 글보기이 회원의 댓글보기
 2018-05-09 (수) 16:15:47
감사합니다. 의외로 너무 쉽게 해결되서 좋습니다 ㅎㅎ
left:1064px; 하니 딱 맞네요^^
토루크막토
프로필 보기이 회원 글보기이 회원의 댓글보기
 2018-05-09 (수) 17:25:05
아....제가 착각했습니다. ㅠㅠ
말씀하신 대로 적용 했을 떄
브라우저 창의 크기를 변경할 때 마다 aside 의 위치가 바뀌는군요. ㅠ_ㅠ
벌이뉨
프로필 보기이 회원 글보기이 회원의 댓글보기
 2018-05-09 (수) 18:37:27
그렇다면 계산을 계속 해줘서 대응해야하는데 혹시 반응형테마 쓰시나요?? 아님 기본 테마 쓰시나요??? 소스는 어느 페이지에 넣으셨는지 알려주세요. 제가 한번 계산해서 코딩해볼께요.
토루크막토
프로필 보기이 회원 글보기이 회원의 댓글보기
 2018-05-09 (수) 18:58:05
감사합니다. 별이뉨 ㅠ_ㅠ

테마는 그누보드 5.3.1.2 기본테마입니다.

스크립트는 /theme/basic/tail.php 에 넣었으며
css는 /theme/basic/css/default.css 에 추가했습니다.
벌이뉨
프로필 보기이 회원 글보기이 회원의 댓글보기
 2018-05-09 (수) 21:20:35
답변 새로 달았습니다. 확인하세요.

2018-05-09 21시 18분에 수정해서 올렸습니다.
해상도에 따른 스크롤시 위치 잡기

스크롤 뿐만 아니라 화면창이 변경될때도 자리잡게 코드 추가 했습니다.
로로우니
프로필 보기이 회원 글보기이 회원의 댓글보기
 2018-05-09 (수) 19:05:51

전 우선 이렇게 해서 해결했습니다.

밑에 875를 적절하게 수정해보세요.

2018-05-09 21시 18분에 수정해서 올렸습니다.

화면창이 변경될때도 자리잡게 코드 추가 했습니다.

Copy 
<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>

답변에 대한 댓글 1개

토루크막토
프로필 보기이 회원 글보기이 회원의 댓글보기
 2018-05-10 (목) 13:05:26
너무 감사합니다. 별이뉨.
적용해봤더니 완벽하게 됐습니다.

소중한 시간 내어주셔서 다시 한번 감사드립니다.

답변을 작성하려면 로그인이 필요합니다.