jquery header fixed layout

jquery/css

모바일에서 스크롤시 헤더/상단 고정되어 내려오기.

script:

$(function(){
	/* header fixed */
	var isFixed = false;
	var offset = $(".header").height();
	checkOffset();

	$(window).scroll(function() {
	  checkOffset();
	});

	function checkOffset() {
	  if ( $('body').scrollTop() > offset){
			if(!isFixed){
				isFixed = true;
				$('.header').addClass('fixed');
				$('.header').css("top", ($(".header").height()*-1)+'px');

				$('.header').stop().animate({top:0}, 700, 'easeInOutExpo');
			}
	  } else {
			if (isFixed){
				isFixed = false;
				$('.header').removeClass('fixed');
			}
	  }
	}
});

css:

.fixed { position: fixed; top:0; left:0; width: 100%; z-index:20; }