DIV 코딩으로 최상단에 고정 시키기

레스트 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2014.05.29 03:41:43 8994 (113.♡.♡.124)

답변 2

본문

div를 이용하여

https://story.kakao.com/~처럼과 같은 레이아웃을 잡아보려고 하는데요...

일단 div에 약하다 보니...너무너무 어렵네요

대충 이런식의 구성이라고 할때

주황색 부분은 position:fixed를 주고...고정을 시키게 했거든요.

그리고 아래로 이미지가 100%를 잡았는데...

fixed를 하니까 이미지 위로 올라가버리니 주황색 부분이 이미지의 윗부분을 가리네요...

또한 페이지가 아래로 내려가서 메뉴 부분에 닫으면

주황색과 메뉴부분이 붙어서 최상단에 떠있게 하려고 하는데...

감을 못잡겠네요 ㅎㅎㅎ

참고할 만한곳이 없을까요....

#jquery #css

답변 2

네이비칼라 자기소개 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색 님의 답변

2014-05-29 07:43:24 125.♡.♡.163

아래 처럼 작성하여 보니 대충 이런걸 원하시는지 모르겠습니다 ㅎㅎ

style은 따로 정리하시고, height는 원하시는 값으로 변경하시면 되겠죠.


<div style="position:fixed; top:0; width:100%;height:20px;background:#F87217;">주황색 부분</div>
<div style="top:20px; width:100%;height:200px;background:#4566AF url(http://wallpoper.com/images/00/45/05/47/green-background-2_00450547.jpg) ;color:white;">배경</div>
<div id="TopMenu" style="position:relative;width:100%;height:30px;background:#000;color:white;">메뉴</div>

<div style="height:1000px">테스트용 다이브</div>

<!-- 메뉴 스크립트 시작-->
<script type="text/javascript">
$(window).scroll(function(){

   var scrollTop = $(window).scrollTop();

   if (scrollTop >= 220) { 
      $('#TopMenu').css({ 
		'position': 'fixed', 
		'top':20 + 'px'
      });	
   }
   else { 
      $('#TopMenu').css({
		'position': 'relative',
		'top':0 + 'px'
      });	
   }   

});
</script>