두 가지 질문이 있습니다 ㅠㅠ

Question

섹션 7에서 사용한 인터렉션을 첫 번째 상위 섹션에 사용하고

svg인터렉션을 하위 섹션에서 사용하고싶은 상황입니다.

질문 1. 해당 svg인터렉션 코드를 사용하니 상위에 있는 섹션7의 배경문이 열리는 인터렉션이 실행되지 않는 이유를 모르겠습니다 ㅠㅠ

질문2. svg인터렉션 을 하위섹션에 사용하고싶은데 윈도우 시작 부터 svg가 그려지는것을 해당 섹션에서 부터 그려지게 하고싶은데 방법을 모르겠습니다..

귀찮으시겠지만 도와주시면 감사드려요!!

Answer

감사합니다!!!! 해결이 되었어요

Answer

안녕하세요 :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섹션의 거리로 변경해 주면 됩니다.

아래와 같이 말이죠!

function drawSvg() {

var winScrollTop = $(window).scrollTop() - $('.두번째svg섹션').offset().top;

var scrollHeight = $('.두번째svg섹션').height();

약간의 코드만 수정하면 되기 때문에 위 내용을 토대로 코드를 수정해 보시고 만약 어려움이 있다면

전체 코드를 보내드리도록 하겠습니다 :)

그럼 또 다른 궁금증이 생기면 문의주세요 :D