jquery 스크롤되다 fixed position되는 소스 문의 드립니다~
본문
외국사이트에서는 많이 보이는 방법인데요..
메뉴가 상단 중간 정도에 있다가 스크롤하면 top에 fixed되서 스크롤을 내려도 계속 보이는 방법입니다.
<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 을 통한 방법도 좋은 해결책일 것 같습니다.
혹시 다른 결과를 원하신다면 조금 더 자세히 기술해주시면 방법을 찾아보겠습니다.
답변을 작성하시기 전에 로그인 해주세요.
