원페이지 parallax 적용 질문입니다.

Question

안녕하세요 선생님, 저번 문제는 대부분 해결됐으나 parallax는 아직 에러가 있습니다 ㅠㅠ

1. 어바웃페이지

https://jsfiddle.net/peachjun/afzx39km/4/

슬라이딩되어 넘어가는것까진 성공했는데 어바웃 메뉴바가 따라오지않고 공간만 비어있습니다.

어느부분이 문제일까요?

2. 뮤지엄 페이지

그리고 뮤지엄 카테고리도 같은 방식으로 진행하는데  차이점은 사이드 메뉴바입니다. (예제늘리기용도로..)

2-1. 우선 사이드 메뉴바 설정이 안됩니다.. museum > ul  선택자에 floa:left 를 주면 되는것 아닌가요?

2-2. 사실about은 선택자 명을 기본예제와 똑같이 바꿔 성공하긴했는데, 뮤지엄의 경우 제가 생각한 선택자로 입력해봤더니 작동이 안됩니다 ㅠ

https://jsfiddle.net/peachjun/9qaa6hcv/2/

도움 요청드립니다

Answer 1

1번 질문
----------------

상단 컨테이너를 구성하는 div 요소가 있는데 class가 header로 되어 있다면 이 컨텐이너는 상단 영역으로 제한해야 되지 않을까요? 아래와 같이 수정되어야 하겠습니다. 즉 div 태그를 종료해 해주세요.(끝에 </div> 삽입) 당연히 잘못 작성된 해당 종료 태그는 제거 해야겠지요.

<!--기존 코드-->
<div id="header" class="about-header">
  <ul>
    <li data-section="1">뮤스토리는</li>
    <li data-section="2">원장소개</li>
    <li data-section="3">학원내부</li>
  </ul>


<!-- 수정된 코드 -->
<div id="header" class="about-header">
  <ul>
    <li data-section="1">뮤스토리는</li>
    <li data-section="2">원장소개</li>
    <li data-section="3">학원내부</li>
  </ul>
</div>

 

다음은 자바스크립트 파트인데 선택자가 잘못 작성되어 있습니다. 아래와 같이 수정해야 하겠습니다. 즉 $("about-header")를 $(".about-header") 로 수정해야 합니다.

$(window).scroll(function() {

	var docTop = $(window).scrollTop();

	if (docTop > 0) {
		$(".about-header").addClass("about-header-fixed");

	} else {
		$(".about-header").removeClass("about-header-fixed");

	}

});

 

 

2번 질문
-----------------

먼저 HTML을 완벽하게 작성한 후 자바스크립트 작업을 해주세요. 원하는대로 레이아웃이 나온 상태에서 자바스크립트 작업을 해주시되 HTML 작업을 하시다가 해결이 안되면 다시 작업중인 HTML 코드로 질문을 남겨주시면 답변 드리겠습니다.