제이쿼리 스크롤

스크롤위치 
$(window).scrollTop();

문서에서의 요소 위치
$('요소').offset().top

기준에서의 좌우위치 
$('요소').position().left

 

---

 

 

 

 

스크롤을 하단으로 내릴때 컨텐츠가 나타나는 이벤트를 제이쿼리로 표현해보자 .

 

---

      1.요소가 가장 위로 스크롤 되는것을 판단

 

먼저 스크롤이 찍히는 위치를 파악하기 위해 제이쿼리 콘솔로 찍어보자.  

문서전체에서 요소의 위아래 위치 판단

 

$(function () {
  console.log($('.main_about .box').offset().top);
});

offset 메서드 안에 top 속성을 가져와라. (top은 속성이기에 괄호 없음)

 

문서가장 위에서 요소의 수직위치를 판단

offset 메서드 : 선택한 html 요소의 오프센 좌표를 가져오거나 설정, 특정좌표로 이동 등등 

스크롤이기에 좌우는 필요없고 위에서 부터 좌료를 찍기위해 top 사용

 

 

$(function () {
  // 문서가장 위에서 요소의 수직위치를 판단
  $(window)
    .on('scroll', function () {
      // 스크롤마다 요소의 위치를 가져옴
      // 창크기에 따라 요소의 위차가 다르기때문
      var posY = $('.main_about .box').offset().top;
      var st = $(this).scrollTop();
      console.log('스크롤한 위치: ' + st);
      console.log('요소의 위치: ' + posY);
    })
    .trigger('scroll');
});

 

 

창을 실행하자마자 콘솔이 보일 수 있게 .trigger('scroll');

 

 

요소의 위치가 창 끝에 같을때 스크롤위치와 요소의 위치값이 동일

---

 

 

if 문으로 값 판단 해보기

 

$(function () {
  // 문서가장 위에서 요소의 수직위치를 판단
  $(window)
    .on('scroll', function () {
      // 스크롤마다 요소의 위치를 가져옴
      // 창크기에 따라 요소의 위차가 다르기때문
      var posY = $('.main_about .box').offset().top;
      var st = $(this).scrollTop();
      console.log('스크롤한 위치: ' + st);
      console.log('요소의 위치: ' + posY);

      if (st >= posY) {
        console.log('요소가 화면 가장위까지 스크롤됨');
      }
    })
    .trigger('scroll');
});

---

요소 2개 판단해보기 

 

 

요소를 한개 더 만들어 테스트 해보자 

html과 변수를 2개씩 만들어 테스트시 요소 1,2 둘다 나옴

 

$(function () {
  // 문서가장 위에서 요소의 수직위치를 판단
  $(window)
    .on('scroll', function () {
      // 스크롤마다 요소의 위치를 가져옴
      // 창크기에 따라 요소의 위차가 다르기때문
      var posY = $('.main_about .box').offset().top;
      var posY2 = $('.main_test .box2').offset().top;
      var st = $(this).scrollTop();

      if (st >= posY) {
        console.log('요소1이 화면위로 스크롤됨');
      }
      if (st >= posY2) {
        console.log('요소2이 화면위로 스크롤됨');
      }
    })
    .trigger('scroll');
});

 

---

 2.요소가 창아래에서 위로 스크롤 되는 순간 판단

 

 

창높이 만큼 빼주기 

if 문을 사용하여 창높이만큼 스크롤을 빼주자

$(function () {
  $(window)
    .on('scroll', function () {

      var posY = $('.main_about .box').offset().top;
      var posY2 = $('.main_test .box2').offset().top;
      var st = $(this).scrollTop();

      if (st >= posY2 - $(window).outerHeight()) {
        console.log('요소2이 창아래에서 올라오는중');
      }
    })
    .trigger('scroll');
});

 

outerHeight 스크롤바 포함

 

 요소가 화면에서 보이기 시작할때 표시해줌

 

 

문서높이만큼 스크롤

 

 

---

3.문서가장 아래까지 스크롤 판단

 

 

스크롤바는 창높이이다

문서의 비례로 줄어든것이라 

문서의 높이를 스크롤 높이만큼 빼줘라

 

 

 

 

 

 

 

 

 

요소가 top 보다 크거나 같으면 

---

 

정리

 

 

      1.요소가 가장 위로 스크롤 되는것을 판단
      $(window).scrollTop() >= 요소.offset().top)


      2.요소가 창아래에서 위로 스크롤 되는 순간 판단
      if($(window).scrollTop() >= 요소.offset().top) - $(window).outerHeight())
      
      
      3.문서가장 아래까지 스크롤 판단
      if(st >=(document).outerHeight() - $(window).outerHeight())