ScrollTrigger의 end와 toggleClass
안녕하세요, 선생님.
섹션2 Advanced Trigger - practice 예제에서
fixedHeader() 함수를 통해 헤더가 pin되어 start 지점부터 fixed 처리가 되잖아요~
이와 동시에 fixed 될 때 특정 클래스(toggleClass : "active")를 넣어서 스타일을 다르게 주려고 했거든요.
그런데 end 마지막 지점에 스크롤이 닿으면 fixed는 되어있지만 class는 사라지더라고요.
혹시 다른 방법이 있을까요?
function fixedHeader(){
ScrollTrigger.create({
trigger: '.nav_container',
start: 'top top',
// endTrigger:'.footer',
end: 'max',
pin: true,
pinSpacing: false,
toggleClass : "active"
})
}
Answer 1
2
안녕하세요 류지 25님 😀
toggleClass는 해당 지점을 leave 하게 되면 바로 클래스를 제거해버리기 때문에 저런 문제가 생기는 것 같습니다.
앞서 학습한
enter콜백을 사용하여 엔터가 된 시점부터 클래스를 넣으시고,
onUpdate 콜백을 사용해 스크롤 진행률이 얼만큼 이하로 내려갔다면 해당 클래스를 제거하는 코드를 작성해 보시는게 좋을 것 같습니다.
만약 텍스트만 보고 해결을 못하셨다면, 댓글 남겨주시면 구현 코드를 추가로 드려보도록 할게요 ㅎㅎ
(직접 고민하고 사용해보는 연습이 중요합니다!)
감사합니다 :)
섹션04 Layout에서 Mixed Layout파트의 실습 index.html파일 열었을때 선생님께서 보여주시는 가로스크롤이 안나타남.
0
84
3
안녕하세요 ScrollSmoother에 대해 질문드릴게요
1
199
2
GSAP 플러그인의 무료화 관련
2
222
3
barba와 ScrollSmoother 사용했을 때 스크롤 업데이트
0
109
2
barba.js 사용시 페이지이동
1
203
2
이상한 부분이 있어서 문의드립니다.
1
100
1
smooth-scrollbar 관련 질문
1
224
2
imagesLoaded 에 관해 질문드려요
1
102
1
scroll Draw SVG에서 실선이 아닌 점선으로 그리고 싶어요
1
183
1
파트 4 오픈 일정 문의
1
142
2
GSAP을 사용하면서 리사이징 시 애니메이션 값 재할당에 대해 질문드립니다.
1
190
2
스무스 스크롤바 모바일에서 뻑뻑한 느낌이 들어요!
1
244
2
OneScroll Layout 질문 드립니다!
1
160
2
OneScroll Layout (1) 관련 재질문드립니다.
2
164
1
OneScroll Layout (1) 강의중 질문 드립니다.
1
262
1
이미지 엑박
1
186
1
UI관련 문의드립니다..!
1
234
2
OneScroll Layout 모바일 터치
1
467
2
노션 링크 보는 곳
1
384
1
반응형 관련해서 질문드립니다.
1
556
2
Text Effects(2)는 Text Effects(1)영상에 포함돼있는 것 같아요!
1
264
1
nav위에 마우스를 올리면 스크롤이 안돼요 😢
1
488
2
ScrollTrigger의 animation에 함수호출
1
446
1
영상 순서 오류
1
386
1