DIV 코딩으로 최상단에 고정 시키기 채택완료
레스트
11년 전
조회 9,811
div를 이용하여
https://story.kakao.com/~처럼과 같은 레이아웃을 잡아보려고 하는데요...
일단 div에 약하다 보니...너무너무 어렵네요
<div>주황색 부분</div>
<div>배경</div>
<div>메뉴</div>
대충 이런식의 구성이라고 할때
주황색 부분은 position:fixed를 주고...고정을 시키게 했거든요.
그리고 아래로 이미지가 100%를 잡았는데...
fixed를 하니까 이미지 위로 올라가버리니 주황색 부분이 이미지의 윗부분을 가리네요...
또한 페이지가 아래로 내려가서 메뉴 부분에 닫으면
주황색과 메뉴부분이 붙어서 최상단에 떠있게 하려고 하는데...
감을 못잡겠네요 ㅎㅎㅎ
참고할 만한곳이 없을까요....
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
11년 전
아래 처럼 작성하여 보니 대충 이런걸 원하시는지 모르겠습니다 ㅎㅎ
style은 따로 정리하시고, height는 원하시는 값으로 변경하시면 되겠죠.
</div>
<div><div><div style="position:fixed; top:0; width:100%;height:20px;background:#F87217;">주황색 부분</div></div>
<div><div style="top:20px; width:100%;height:200px;background:#4566AF url(<a href="http://wallpoper.com/images/00/45/05/47/green-background-2_00450547.jpg)" target="_blank" rel="noopener noreferrer">http://wallpoper.com/images/00/45/05/47/green-background-2_00450547.jpg)</a> ;color:white;">배경</div></div>
<div><div id="TopMenu" style="position:relative;width:100%;height:30px;background:#000;color:white;">메뉴</div></div>
<div>
</div>
<div><div style="height:1000px">테스트용 다이브</div></div>
<div>
</div>
<div><!-- 메뉴 스크립트 시작--></div>
<div><script type="text/javascript"></div>
<div>$(window).scroll(function(){</div>
<div>
</div>
<div> var scrollTop = $(window).scrollTop();</div>
<div>
</div>
<div> if (scrollTop >= 220) { </div>
<div> $('#TopMenu').css({ </div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span>'position': 'fixed', </div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span>'top':20 + 'px'</div>
<div> });<span class="Apple-tab-span" style="white-space: pre"> </span></div>
<div> }</div>
<div> else { </div>
<div> $('#TopMenu').css({</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span>'position': 'relative',</div>
<div><span class="Apple-tab-span" style="white-space: pre"> </span>'top':0 + 'px'</div>
<div> });<span class="Apple-tab-span" style="white-space: pre"> </span></div>
<div> } </div>
<div>
</div>
<div>});</div>
<div></script></div></div>
<div>
로그인 후 평가할 수 있습니다
답변에 대한 댓글 1개
�
레스트
11년 전
진심으로 감사의 말씀을 드립니다...ㅠㅠ
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인