우측 사이드바를 만들고 있는 중입니다.
본문
현재 사이드바에는
position: fixed;
top: 38px;
이렇게 되어있는데..
스크롤이 되면서 자동으로 1씩 줄어들어서.. top : 0이 되면 자동으로 0으로 고정이 되고..
다시 맨위쯤에 갔을때는 1씩 늘어나서 top : 38px 로 되는 스크립트를 구현하고 싶습니다.
참고로 맨 상단에는 배너부분이 열고 닫고가 되어있어서..
배너부분이 닫혀있을땐 38px이지만, 배너부분이 열려있으면 147px 입니다.
147px일때도 역시나 스크롤이 될때 1씩 줄어들어서 0이되면 상단에 딱 붙어야합니다.
많은 조언 부탁드립니다.
참고 사이트는
http://mall.hyundailivart.co.kr/front/index.lv
여기에서 우측 사이드바입니다.
답변 2
페이지를 아래와 같이 만드시면 되지 않을까 싶습니다.
테스트 : http://btstocking.mooo.com/test/scroll
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="utf-8"/>
<title>Scroll</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<style>
body{
margin: 0px;
padding: 0px;
}
#header {
background-color: #000;
}
#banner {
height: 109px;
background-color: #00F;
}
#menu {
height: 38px;
}
#toggle_button {
color: #fff;
}
#side_bar {
position: fixed;
top: 147px;
right: 0px;
width: 200px;
height: 300px;
background-color: #f00;
}
#content {
width: 728px;
height: 1200px;
margin: auto;
background-color: #F1F1F1;
}
</style>
</head>
<body>
<div id="header">
<div id="banner">BANNER</div>
<div id="menu"><a id="toggle_button" href="#">banner</a></div>
</div>
<div id="content"></div>
<div id="side_bar"></div>
<script>
header_h = $('#header').outerHeight(true);
$('#toggle_button').click(function(){
$('#banner').toggle();
header_h = $('#header').outerHeight(true);
$('#side_bar').css("top", header_h);
});
$(document).scroll(function(){
scroll_pos = $(this).scrollTop();
new_top = header_h - scroll_pos;
if(new_top <= 0) new_top = 0;
$('#side_bar').css("top", new_top);
});
</script>
</body>
</html>
저를 위해 테스트 페이지까지 만들어주시다니 정말 감사합니다.
(- -) (_ _)
되지도 않는 내용 알려드렸다가 고생만 가중시켜 드릴 순 없어서 만들어 봤습니다.
알려드린 내용이 잘 적용 되었으면 좋겠습니다.
답변을 작성하시기 전에 로그인 해주세요.
