묻고답하기
xpress 홈페이지처럼 상단 고정 메뉴에 대해 질문드립니다.
2015.02.03 22:22
xpress 홈페이지처럼 상단 고정 메뉴에 대해 질문드립니다.
상단 고정은 성공했구요. 다만 문제가 게시글이 메뉴 위로 올라가는 게 보입니다.
html 소스입니다.
----------------------------------------
<title>제목</title>
<style>
body {
margin: 0px;
padding: 0px;
}
.jbMenu {
text-align: center;
background-color: yellow;
padding: 10px 0px;
width: 100%;
}
.jbContent {
height: 2000px;
}
.jbFixed {
position: fixed;
top: 0px;
}
</style>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$( document ).ready( function() {
var jbOffset = $( '.jbMenu' ).offset();
$( window ).scroll( function() {
if ( $( document ).scrollTop() > jbOffset.top ) {
$( '.jbMenu' ).addClass( 'jbFixed' );
}
else {
$( '.jbMenu' ).removeClass( 'jbFixed' );
}
});
} );
</script>
<BODY topmargin="0">
<div class="jbMenu">
<p>
<div align="top"><div align="right" style="padding-right:250px;"><img class="zbxe_widget_output" widget="login_info" skin="xe_globalTwo" colorset="white" /></div></div>
</p>
</div>
<load target="user_layout.css" />
<div class="user_layout">
<div class="header">
<div class="header"><center><img src="http://i.imgur.com/Brk8N0b.jpg"></center></div>
<hr />
</div>
<hr />
<div class="body">
<div class="content">{$content}</div>
</div>
<hr />
<div class="footer"><div class="copyright">Copyrightⓒ2015 TAEMTIME All rights reserved.</div></div>
</div>
<script type="text/javascript" src="http://radarurl.com/js/radarurl_widget.js"></script><script type="text/javascript">radarurl_call_radar_widgetv2({edition:"Dynamic",location:"rightbottom"})</script><noscript><a href="http://radarurl.com/">RadarURL</a></noscript>
<body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" style="background-image:url('http://i.imgur.com/6vqjdPM.jpg'); background-repeat:repeat-x;">
</body>
----------------------------------------
댓글 4
-
XESTUDIO
2015.02.03 22:27
-
나리_
2015.02.03 22:43
해결했습니다! 감사합니다^^
-
일단 body{margin:0} 을 넣으면 여백이 없어질겁니다.
두번째
어차피 js가 활성화 되면 position:fixed로 바뀌니까
.jbMenu{position:fixed;z-index:2} 처리하시고요
.user_layout{position:relative;z-index:1} 을 추가해 보세요.
-
나리_
2015.02.03 22:43
적용하니까 됐어요! 너무 감사드립니다!^^
z-index 값을 상향조절해보세요. 그래도 해결이 안되면 잦은 문제는 따로 연락주세요.
카카오톡 cityproject