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