jquery 스크롤되다 fixed position되는 소스 문의 드립니다~ 채택완료
외국사이트에서는 많이 보이는 방법인데요..
메뉴가 상단 중간 정도에 있다가 스크롤하면 top에 fixed되서 스크롤을 내려도 계속 보이는 방법입니다.
Copy
<script type="text/javascript"> $(function(){ // document ready
if (!!$('#sticky').offset()) { // make sure "#sticky" element exists
var stickyTop = $('#sticky').offset().top; // returns number
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stickyTop < windowTop){ $('#sticky').css({ position: 'fixed', top: 60 }); } else { $('#sticky').css('position','static'); }
});
}
}); </script>현재 요런 소스를 이용해서 구현하구 있구요..
이 부분에서 $('#sticky').css({ position: 'fixed', top: 60 }); 이렇게 설정한 이유는
스크롤이 되면 위에 딱 붙는게 아니라 위에서 60px 떨어뜨릴려구 제가 임의로 바꾼 방법입니다.
그런데 이렇게 했더니 스크롤이 되었을때 결과적으로 떨어지기는 하는데
떨어지는 모양새가 이쁘질 않더라구요..
#stick가 windowtop 까지 같다가 다시 60px 밑으로 fixed가 되다보니 덜컥(?)거리는 느낌으로 떨어지더라구요..
어줍짢은 실력으로 소스를 들여다보니
#stick가 top에 가야지 fixed가 적용이 되다 보니 그런것 같더라구요..
이걸 어케 처음부터 windowtop까지 올라가지 않고 위에서 60px까지 가면 fixed가 되는 방법은 없을까요?
고수님들 도움좀 부탁드립니다~
답변 3개
답변을 작성하려면 로그인이 필요합니다.
로그인
이 방법보다 https://wicky.nillia.ms/headroom.js 을 통한 방법도 좋은 해결책일 것 같습니다.
혹시 다른 결과를 원하신다면 조금 더 자세히 기술해주시면 방법을 찾아보겠습니다.