인프런 커뮤니티 질문&답변
작성한 질문수
두 가지 질문이 있습니다 ㅠㅠ
작성
·
172
0
섹션 7에서 사용한 인터렉션을 첫 번째 상위 섹션에 사용하고
svg인터렉션을 하위 섹션에서 사용하고싶은 상황입니다.
질문 1. 해당 svg인터렉션 코드를 사용하니 상위에 있는 섹션7의 배경문이 열리는 인터렉션이 실행되지 않는 이유를 모르겠습니다 ㅠㅠ
질문2. svg인터렉션 을 하위섹션에 사용하고싶은데 윈도우 시작 부터 svg가 그려지는것을 해당 섹션에서 부터 그려지게 하고싶은데 방법을 모르겠습니다..
귀찮으시겠지만 도와주시면 감사드려요!!
답변 2
1
0
안녕하세요 :D
어려운 부분이 있으셨군요! 답변드리겠습니다 :)
질문1. 답변
섹션7과 섹션11을 병합하는 과정을 어떻게 하셨는지 모르겠지만 스크립트 코드를 합칠땐
중복되는 코드가 있을 수 있을 수 있으므로 해당 섹션 코드를 각각의 함수로 감싸주면 스크립트 오류는 발생하지 않을거에요 :) 조금 더 자세히 알고 싶다면 자바스크립트 기초 스코프에 대해 공부해보세요!
예) 예를 들면 아래와 같이 간단하게 레디 펑션으로 감싸줘도 됩니다 :)
$(function(){
섹션7코드...
});
$(function(){
섹션11코드...
});
질문2. 답변
질문2는 앞전 수업을 자세히 들으셨다면 혼자서 해결할 수 있을테니 여유가 생기면 다시 한번 공부해 보시길 추천드립니다 :)
먼저 섹션 7 코드는 position: sticky로 작성되어 있고 섹션 11은 position: fixed로 작성되어 있습니다. 두개의 코드를 합치기 위해선 섹션11의 css코드를 섹션7과 같이 position: sticky로 변경해 주어야 합니다.
그다음 css 수정이 끝났다면 섹션11 자바스크립트 수식 수정을 해주면 되는데요
이전에 배웠던대로
섹션11 스크립트의 스크롤 탑 값에서 두번째 섹션의 오프셋 탑 값을 빼주고
스크롤 거리를 svg섹션의 거리로 변경해 주면 됩니다.
아래와 같이 말이죠!
약간의 코드만 수정하면 되기 때문에 위 내용을 토대로 코드를 수정해 보시고 만약 어려움이 있다면
전체 코드를 보내드리도록 하겠습니다 :)
그럼 또 다른 궁금증이 생기면 문의주세요 :D
👏👏