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


이미지

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

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

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

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

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

  • 2017년 01월 11일에 작성됨
    웹 사이트 공부 중입니다. 많은 도움 주시면 좋아요.

조회수 163


Banner slack 2x iegsyt

3 답변


좋아요
2
싫어요
채택취소하기

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

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

  • 2017년 01월 11일에 작성됨

  • 고맙습니다. 높이를 어느 부분을 기준으로 가져오는지가 관건이겠네요.    상남자   2017.1.11 19:32     

사이드바 영역의 z-index 를 설정하는 방법으로 해결하는 것 도 좋을 것 같네요.

  • 2017년 01월 11일에 작성됨

  • 단순히 위로 띄우는건 겹쳐보여서 다른 방법을 찾고 있었습니다. 답변 고맙습니다.    상남자   2017.1.11 19:31     

스크롤 이벤트 발생 시마다 어느 정도 스크롤이 되면 absolute로 변경하고, 높이를 변경해주시면 됩니다.

Jinoh Kim 님 생각이랑 같네요.

  • 2017년 01월 11일에 작성됨

  • 고맙습니다.    상남자   2017.1.11 19:31     

로그인이 필요한 기능입니다.

Hashcode는 개발자들을 위한 무료 QnA사이트 입니다. 작성한 답변에 다른 개발자들이 댓글을 작성하거나 좋아요/싫어요를 할 수 있기 때문에 계정을 필요로 합니다.
► 로그인
► 계정만들기
Close