퀵메뉴가 따라다니다가 footer 영역에 도달하면 그 영역에 고정되게 하고싶은데 아직 코딩초보라 잘 모르겟네요ㅠㅠ
본문
퀵메뉴가 따라다니다가 하단에 footer 영역에 쯤에 도달하면 footer영역보다는 안내려가고 그 영역 위로 고정 되어 있는 형태로 코드를 짜고 싶은데 어떻게 해야 할지 잘 모르겟네요ㅠㅠ 좀 도와주세요..
(ex. fixed였다가 absolute 형태로?.. 하단에서는 그 영역에 고정되어 있게 하고싶네요ㅠㅠ)
반응형입니다.
답변 2
소스코드 같이 보기
https://codepen.io/moksunung/pen/JjbMwyB
넓게 보기
https://cdpn.io/moksunung/debug/JjbMwyB/yYAyLaaOVedr
1. absolute 상태
스크롤 인터렉션할 대상 DOM의 2가지 상태에 대한 디자인을 먼저합니다. 우선 고정된 상태인 position absolute의 상태에서 디자인을 입힙니다.
2. fixed 상태
그리고 그 상태에서 대상에 fixed 상태를 구분지어 줄 클래스를 하나 덧붙여 absolute 상태의 디자인을 덮어씌웁니다. (선택자 우선순위에 따라 스타일이 override 되도록)
3. 자바스크립트로 스크롤 변수에 따라 선택자를 삭제하거나 복구
자바스크립트(예제에선 jquery)로 스크롤이 원하는 상태(높이)를 넘어서면 fixed 상태를 만들어주기 위해 덧붙였던 클래스를 삭제해주고, 되돌아가면 fixed 상태로 되돌려주기 위해 클래스를 다시 붙여줍니다.
예제도 보시고 설명도 보시면 이해가 되실지 모르겠네요.
간단하게 말씀드려서 2가지 상태를 CSS로 미리 디자인해놓고, 자바스크립트로 조건을 걸어 조건에 따라 CSS가 제어되도록 하는것입니다^^
정말 감사합니다. 덕분에 매끄럽게 정말 잘 해결했네요ㅠㅠ 한참 찾아다녓는데 정말 감사합니다.
css 만으로도 가능하지만 호환성이 좋진 않습니다
position: sticky;
쓰시면 될 것 같구요...
브라우저도 고려해야한다고 하면 말씀하신 방법을 스크립트로 구현해야합니다;;
scrollTop 체크해서 일정 값 이상이고 푸터에 닿기 전을 체크해서 퀵메뉴의 top 값을 바꿔주는 방식으로 구현하면 되지 않을까 싶습니다;;
퀵메뉴의 원래 offset().top 값에 scrollTop 을 더해주는 방식으로요...
다른 방법으로는 gsap 플러그인을 쓰는건데 scrollTrigger 라고 플러그인의 확장기능이 있습니다.
scrollTrigger 에 있는 pin 기능을 쓰시면 되지 않을까 싶습니다...(이 방법은 저도 아직 써본적은 없어서..)
링크 공유해드립니다 https://greensock.com/docs/v3/Plugins/ScrollTrigger
