따라다니는 사이드바 구현 방법

조회수 1955회

이미지

사진 출처: http://bootstrapk.com/getting-started/

사이드바를 구현 중 입니다.

오른쪽 사이드바를스크롤 할때 특정 위치에서 position 을 fixed 로 설정하여 따라다니는 효과를 주었습니다.

그러나 해결하지 못한 부분은, 가장 아래로 스크롤 하였을 때 위 사진처럼 특정 위치에서는 footer 에 겹치지 않게 다시 스크롤을 따라 올라가는 효과를 주고 싶습니다.

특정 위치라는 것을 어떤 기준을 삼아야 자연스러울지 등, 관련 조언 부탁드립니다.

3 답변

  • 좋아요

    2

    싫어요
    채택 취소하기

    스크롤시에 체크해서 위치가 푸터위라면 포지션을 absolute로 변경하고 푸터위에 고정시키면 되지않을까요?

    저 사이트는 스크롤하다 사이드바를 지나치게되면 fixed 로 바꿔서 따라오도록 해놓은거같네요

    • (•́ ✖ •̀)
      알 수 없는 사용자
    • 고맙습니다. 높이를 어느 부분을 기준으로 가져오는지가 관건이겠네요. 상남자 2017.1.11 19:32
  • 사이드바 영역의 z-index 를 설정하는 방법으로 해결하는 것 도 좋을 것 같네요.

    • (•́ ✖ •̀)
      알 수 없는 사용자
    • 단순히 위로 띄우는건 겹쳐보여서 다른 방법을 찾고 있었습니다. 답변 고맙습니다. 상남자 2017.1.11 19:31
  • 스크롤 이벤트 발생 시마다 어느 정도 스크롤이 되면 absolute로 변경하고, 높이를 변경해주시면 됩니다.

    Jinoh Kim 님 생각이랑 같네요.

    • (•́ ✖ •̀)
      알 수 없는 사용자

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

프로그래머스 커뮤니티는 개발자들을 위한 Q&A 서비스입니다. 로그인해야 답변을 작성하실 수 있습니다.

(ಠ_ಠ)
(ಠ‿ಠ)