Jquery FullPageScroll(학습 65일차 TIL)

210914 플러그인을 사용하지 않고, 전체 페이지 스크롤 효과를 구현해 보는 첫 번째 시간이었다. 오늘 컨디션이 좋지 않아서 그런지 html에 자바스크립트를 심을 때 철자 하나를 빠뜨려서 1시간 이상을 헤맸다...js가 전혀 작동하지 않지만 콘솔창에 오류가 없는 케이스라면 이런 부분을 의심해 보자.

Must Remember

• 피그마로 각 요소의 CSS상의 위치를 확인할 수 있다.
• 컨텐츠를 넣을 div의 높이를 window의 높이만큼 지정해 준다.

var ht = $(window).height();	
  $("#container > div").height(ht);

  $(window).resize(function(){
    $("#container > div").height(ht);
});

• aside의 경우 항상 오른쪽 가운데에 위치 하도록 window 높이의 반에서 자신의 높이의 반 만큼 빼주고 스크롤 위치를 더해준다.

var t = $(window).height()/2 - $("#quick").height()/2;
 $("#quick").stop().animate({"top":t}, 500, "linear");

$(window).scroll(function() {
 var quickPos = $(this).scrollTop() + t;
 $("#quick").stop().animate({"top":quickPos}, 700, "linear");
});