제이쿼리 scroll/animate

 

헤더가 마우스 스크롤을 하면 

 

 

이렇게 gnd 색이 변할수 있도록 제이쿼리를 설정해보자 

 

 

 

---

 

$(function () {
  // scroll 이벤트는 스크롤시 아주 많이 발생하므로 최적화를 신경써야함
  // 선택하여 변수에 대입하면 탐색은 한번만
  $(window).on('scroll', function () {
    var st = $(this).scrollTop();
    console.log(st);

    if (st > 0) {
      $('#header').addClass('on');
    } else {
      $('#header').removeClass('on');
    }
  });
});

최적화후 

 

$(function () {
  // scroll 이벤트는 스크롤시 아주 많이 발생하므로 최적화를 신경써야함
  // 선택하여 변수에 대입하면 탐색은 한번만
  var header = $('#header');

  $(window).on('scroll', function () {
    var st = $(this).scrollTop();
    console.log(st);

    if (st > 0) {
      addClass('on');
    } else {
      removeClass('on');
    }
  });
});

 

 

---

 

 

그리고 이 top 버튼을 누르면 맨 위로 위치할수 있게 해보자 

 

$(function () {
  // scroll 이벤트는 스크롤시 아주 많이 발생하므로 최적화를 신경써야함
  // 선택하여 변수에 대입하면 탐색은 한번만
  var header = $('#header');

  $(window)
    .on('scroll', function () {
      var st = $(this).scrollTop();
      console.log(st);

      if (st > 0) {
        header.addClass('on');
      } else {
        header.removeClass('on');
      }
    })
    .trigger('scroll');

  // 푸터 탑버튼
  $('#footer .btn_top').on('click', function (e) {
    // a기본이벤트막기
    e.preventDefault();
    // this.scrollTop 조작시 animate메서드 이용하며 IE와 크롬이 서로 다르므로
    // htmlPrefilter, body 둘다 걸어줌
    $('html, body').animate({ scrollTop: 0 }, 500);
  });
});

 

 e.preventDefault(); 

꼭 걸어줄것