스크롤 올릴시 하단에 메뉴 출력방법 질문드립니다.
본문
티몬이나 지마켓등 쇼핑몰등에 모바일로 접속하면 어플처럼 하단에 메뉴가 생깁니다.
영카트 기본 상단에 일부를 첨부이미지처럼 하단으로 옴길려고 하는데요..
스크롤 올릴시 상당메뉴 고정처럼 일정 픽셀 움직여야 등장을 하더군요..
혹시 방법 아시는분 답변 부탁드리겠습니다!!
답변 2
html
<div id="bottom"></div>
css
#bottom { position:fixed; bottom;0; display:block; }
jquery
$(window).scroll(function () {
if ($(this).scrollTop() > 60) {
$('#bottom').fadeIn();
} else {
$('#bottom').fadeOut();
}
});
60만큼 스크롤되면 ID값 bottom레이어를 나타내는 스크립트입니다.
높이는 60을 원하는 위치만큼 수정하면됩니다.
해당 영역의 div 에 css를
position: fixed;
bottom: 0;
width: 100%;
이렇게 주시면 해당 영역이 거기에 붙어 버릴겁니다.
아..그렇게 하단 메뉴 레이아웃 자리잡게 하고 안에를 꾸미면 되는건가요??
추가로 일정한 스크롤 이동시 출력하는 방법도 아시면 부탁드리겠습니다.ㅠㅠ
일정 스크롤 이동시 라는게 어떠한 말씀이신것인지..이해가 안가서요..
답변을 작성하시기 전에 로그인 해주세요.
