특정위치까지 스크롤하면 나타나는 고정메뉴
본문
처음에는 안보이다가 특정위치까지 스크롤을 내리면 나타다는 고정메뉴를 만들고 싶습니다.
여러가지 소스를 찾아서 테스트해봤는데 원하는 것과 조금씩 차이가 있네요.
이미 만들어진 사이트에 추가로 넣을 예정이라서 최대한 충돌이 없는 소스면 좋겠네요.
메인 네비게이션과 별개로 각 서브페이지 내용을 보기위해 스크롤을 내리면
서브메뉴 상단에 메뉴바가 나타나서 고정되게 해서 서브페이지 접근성을 편리하게 구현하고 싶습니다.
관련 소스나 예제 중에서 추천하실만한 정보가 있으면 공유나 도움 부탁 드립니다.
감사합니다.
답변 2
제이쿼리 플러그인도 많은데 안맞으신다면
offset() 이용하셔서 직접 처리하시면됩니다.
해당 메뉴가 나오게될 부분의 바로 이전 오브젝트(div 등)위치를 구하신뒤에
현재 스크롤 구하시고 오브젝트 위치보다 아래라면 .show() 등으로 나타나게 하시면됩니다.
offset 예제는 아래 URL 참고하시고
https://www.codingfactory.net/10335
스크롤은 아래 URL 참조하셔서 하시면될것같네요.
네~ 답변 감사 드립니다. 한번 시도해 보겠습니다.^^
제가 사용하고 있는 소스 인데 참고하세요.
$(window).scroll(function (){ // 스크롤시
<?php if($wset['scrollon_'.$i]){ ?>
var adpwidwidth = $(".<?php echo $wid ?>_add<?php echo $wset['scrollon_'.$i]; ?>").outerWidth(); // 해당 객체의 width 값
var adpwidheight = $(".<?php echo $wid ?>_add<?php echo $wset['scrollon_'.$i]; ?>").outerHeight(); // 해당 객체의 width 값
$(".<?php echo $wid ?>_dmon_<?php echo $i; ?>").css("width",adpwidwidth).css("height",adpwidheight);
<?php } ?>
<?php if($wset['scrolloff_'.$i]){ ?>
var adpwidwidth = $(".<?php echo $wid ?>_add<?php echo $wset['scrolloff_'.$i]; ?>").outerWidth(); // 해당 객체의 width 값
var adpwidheight = $(".<?php echo $wid ?>_add<?php echo $wset['scrolloff_'.$i]; ?>").outerHeight(); // 해당 객체의 adpwidheight 값
$(".<?php echo $wid ?>_dmoff_<?php echo $i; ?>").css("width",adpwidwidth).css("height",adpwidheight);
<?php } ?>
var scrollview = $(document).scrollTop(); // 현재 스크롤값을
var adpheight = $(window).height(); // 현재 윈도우 높이
var adpwidtop = $(".<?php echo $wid ?>_add<?php echo $i ?>").offset().top; // 대상 top 위치
var adpwidheight = $(".<?php echo $wid ?>_add<?php echo $i ?>").outerHeight(); // 대상 높이
<?php if($wset['scr_smooth_'.$i]){ ?>
var adpwidblock = adpwidtop - adpheight + 1 + (adpwidheight/2); // 대상이 보이는 위치
<?php } else { ?>
var adpwidblock = adpwidtop - adpheight + 1; // 대상이 보이는 위치
<?php } ?>
if(adpwidblock <= 0){ var adpwidblock = adpwidtop - adpwidheight; } // top 값이 0보다 아래라면 현재값 재계산
var adpwidnone = adpwidtop + adpwidheight - 1;// 대상이 않보이는 위치
if(scrollview >= adpwidblock && scrollview <= adpwidnone){ // 참이면 (현재 화면에 보여도 참)
//---------------------------------------------------
// 화면에 보임 (온로드/창리사이징/스크롤시)
//---------------------------------------------------
} else { // 거짓이면
//---------------------------------------------------
// 화면에 안보임 (온로드/창리사이징/스크롤시)
//---------------------------------------------------
}
});
정말 감사합니다. 적용해 보겠습니다.^^
답변을 작성하시기 전에 로그인 해주세요.
