우측 사이드바를 만들고 있는 중입니다. 채택완료
원자력장판
9년 전
조회 4,456
현재 사이드바에는
position: fixed;
top: 38px;
이렇게 되어있는데..
스크롤이 되면서 자동으로 1씩 줄어들어서.. top : 0이 되면 자동으로 0으로 고정이 되고..
다시 맨위쯤에 갔을때는 1씩 늘어나서 top : 38px 로 되는 스크립트를 구현하고 싶습니다.
참고로 맨 상단에는 배너부분이 열고 닫고가 되어있어서..
배너부분이 닫혀있을땐 38px이지만, 배너부분이 열려있으면 147px 입니다.
147px일때도 역시나 스크롤이 될때 1씩 줄어들어서 0이되면 상단에 딱 붙어야합니다.
많은 조언 부탁드립니다.
참고 사이트는
http://mall.hyundailivart.co.kr/front/index.lv">http://mall.hyundailivart.co.kr/front/index.lv
여기에서 우측 사이드바입니다.
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
9년 전
페이지를 아래와 같이 만드시면 되지 않을까 싶습니다.
테스트 : http://btstocking.mooo.com/test/scroll">http://btstocking.mooo.com/test/scroll
</p><p><!DOCTYPE html></p><p><html lang="ko"></p><p><head></p><p> <meta charset="utf-8"/></p><p> <title>Scroll</title></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><script src="<a href="<a href="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js</a>"><a href="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js" target="_blank" rel="noopener noreferrer">https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js</a></a>"></script></p><p><span class="Apple-tab-span" style="white-space:pre"> </span></p><p><span class="Apple-tab-span" style="white-space:pre"> </span><style></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>body{</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>margin: 0px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>padding: 0px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>#header {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>background-color: #000;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>#banner {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>height: 109px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>background-color: #00F;</p><p> </p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>#menu {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>height: 38px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>#toggle_button {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>color: #fff;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>#side_bar {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>position: fixed;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>top: 147px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>right: 0px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>width: 200px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>height: 300px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>background-color: #f00;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>#content {</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>width: 728px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>height: 1200px;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>margin: auto;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>background-color: #F1F1F1;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>}</p><p><span class="Apple-tab-span" style="white-space:pre"> </span></style></p><p></head></p><p><body></p><p><div id="header"></p><p><div id="banner">BANNER</div></p><p><div id="menu"><a id="toggle_button" href="#">banner</a></div></p><p></div></p><p> </p><p><div id="content"></div></p><p><div id="side_bar"></div></p><p> </p><p><script></p><p><span class="Apple-tab-span" style="white-space:pre"> </span>header_h = $('#header').outerHeight(true);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$('#toggle_button').click(function(){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$('#banner').toggle();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>header_h = $('#header').outerHeight(true);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$('#side_bar').css("top", header_h);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$(document).scroll(function(){</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>scroll_pos = $(this).scrollTop();</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>new_top = header_h - scroll_pos;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>if(new_top <= 0) new_top = 0;</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>$('#side_bar').css("top", new_top);</p><p><span class="Apple-tab-span" style="white-space:pre"> </span>});</p><p></script></p><p></body></p><p></html></p><p>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
원자력장판
9년 전
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
(- -) (_ _)