1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | /* 메뉴고정하기 */ $(function(){ var flag = true; // 스크롤이 고정하려는 메뉴를 넘어갈 때 한 번만 실행하기 위한 기준 선언 var lastScrollTop = 0; var menuOffTop = $(".store_top_cover .txt_cover").offset().top; var menuHeight = $(".store_top_cover .txt_cover").outerHeight(); var menuOffBot = menuOffTop + menuHeight; //메뉴 하단 좌표 구하기 $(window).scroll(function(){ hasScrolled(); }); function hasScrolled() { var st = $(this).scrollTop(); // 현재 스크롤 if (st >= menuOffBot && flag){ // 메뉴 하단에서 다운스크롤 될 때 fixTopCover(); flag = false; } else if(st < menuOffBot && !flag) { // 메뉴 하단에서 업스크롤 될 때 normalTopCover(); flag = true; } lastScrollTop = st; // 마지막 스크롤 저장 } // 메뉴 고정 다운 애니메이션 function fixTopCover(){ $(".store_top_cover").addClass("fix"); $(".store_top_cover .cover_inner").css("top","-80px"); $(".store_top_cover .cover_inner").animate({"top":0},600,"easeOutExpo"); } // 메뉴 고정 풀기 function normalTopCover(){ $(".store_top_cover").removeClass("fix"); } }); /* [end]: 메뉴고정하기 */ | cs |
'Front > JavaScript' 카테고리의 다른 글
테이블 서머리, 캡션 삽입 스크립트 (0) | 2016.09.22 |
---|---|
백그라운드이미지 애니메이션 (0) | 2016.09.22 |
일정한 개수로 그룹화(묶기) (0) | 2016.08.02 |
테이블 헤드 고정 (0) | 2016.07.28 |
중복값 체크하기 (1) | 2016.05.17 |
댓글 로드 중…
트랙백을 확인할 수 있습니다
URL을 배껴둬서 트랙백을 보낼 수 있습니다