스크롤 했을 때 헤더 고정

참고해라 ilottedfs.com/LDFmagazine/201022/sub3/index.html

 

 

function topScrollMotion() {

  // IE하위 버전 호환용

  var supportPageOffset = window.pageXOffset !== undefined;

  var isCSS1Compat = (document.compatMode || '') === 'CSS1Compat';

  var header = $('.header');

  var back = $('.header_back');

  var title = $('.header_title');

  var share = $('#main_share');

 

  // 현재 스크롤 값

  var _top = supportPageOffset

    ? window.pageYOffset

    : isCSS1Compat

    ? document.documentElement.scrollTop

    : document.body.scrollTop;

 

  window.addEventListener('scroll', function() {

    // 스크롤 시작할 때의 스크롤 값

    var _scroll_top = supportPageOffset

      ? window.pageYOffset

      : isCSS1Compat

      ? document.documentElement.scrollTop

      : document.body.scrollTop;

 

    // ios 스크롤 바운스 대비용

    if (_scroll_top < 0) return header.scrollMotion(true);

 

    // 스크롤 업 다운 인식

    if (257 > _scroll_top) {

      //스크롤 다운

      header.scrollMotion(false);

    } else {

      // 스크롤 업

      header.scrollMotion(true);

    }

 

    _scroll_top > 2400

      ? TweenMax.to('.text_last1', 0.4, { opacity: 1, y: -10 })

      : TweenMax.to('.text_last1', 0.4, { opacity: 0, y: 0 });

    _scroll_top > 2300

      ? TweenMax.to('.text_last2', 0.4, { opacity: 1, y: -10 })

      : TweenMax.to('.text_last2', 0.4, { opacity: 0, y: 0 });

      

    if(_scroll_top > 1107){

      // console.log(_scroll_top)

      $('.navi > ul').css('position','fixed')

      $('.navi > ul').css('top','70px')

      $('.header').css('height','140px')

    }else{

      $('.navi > ul').css('position','')

      $('.navi > ul').css('top','')

      $('.header').css('height','70px')

 

    }

 

    //  console.log(_flow);

    _top = _scroll_top;

  });

 

  header.scrollMotion = function(value) {

    if (value) {

      header.addClass('on');

      back.addClass('on');

      title.addClass('on');

      share.addClass('on');

    } else {

      header.removeClass('on');

      back.removeClass('on');

      title.removeClass('on');

      share.removeClass('on');

    }

  };

}