상단메뉴 고정은 어떻게 할 수 있나요? 채택완료
허걱김선생
1년 전
조회 1,451
수고하십니다.
상단 메뉴 부분을 고정하고 싶어서
아래와 같은 팁을 적용해 보았습니다.
그런데
스크롤 하면 메뉴가 고정은 안되고
회색 바탕이 메뉴 크기만큼 나와서 따라 다닙니다.;;;
검색 부분도 빼고 딱 메뉴만 고정하고 싶은데
조언 좀 얻을 수 있을까요?
감사합니다.
</p>
<p><script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"" target="_blank" rel="noopener noreferrer">http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"</a> charset="utf-8"></script><!--topmenu_fixed-->
<script type="text/javascript" charset="utf-8">
$(function() {$(function(){
var menu = $('#menu'),
pos = menu.offset();
$(window).scroll(function(){
if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){
menu.fadeOut('fast', function(){
$(this).removeClass('default').addClass('fixed').fadeIn('fast');
});
} else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){
menu.fadeOut('fast', function(){
$(this).removeClass('fixed').addClass('default').fadeIn('fast');
});
}
});
});
});</script></p>
<p><style TYPE="text/css">
#navi {}
#menu {text-align: center;margin: 0 auto;padding: 0;}
.fixed {position: fixed;top: -5px;left: 0;width: 100%;
box-shadow: 0 0 40px #000;
-webkit-box-shadow: 0 0 40px #000;
-moz-box-shadow: 0 0 40px #000;
</style>
</p>
<p><div id="navi">
<div id="menu" class="default">메뉴</div>
</div></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 2개
채택된 답변
+20 포인트
1년 전
안녕하세요.
아래의 코드를 참고해 보시겠어요?
</p>
<p><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Fixed Menu</title>
<script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"" target="_blank" rel="noopener noreferrer">http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"</a> charset="utf-8"></script>
<style>
body {
margin: 0;
padding: 0;
}</p>
<p> #navi {
width: 100%;
background-color: #f0f0f0; /* 배경색 지정 */
z-index: 1000; /* 다른 요소 위에 위치 */
}</p>
<p> #menu {
text-align: center;
margin: 0 auto;
padding: 10px; /* 메뉴의 패딩을 추가하여 여백 확보 */
transition: all 0.3s ease-in-out; /* 부드러운 변화를 위한 트랜지션 추가 */
}</p>
<p> .fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
box-shadow: 0 0 40px #000;
-webkit-box-shadow: 0 0 40px #000;
-moz-box-shadow: 0 0 40px #000;
background-color: #f0f0f0; /* 고정되었을 때의 배경색 지정 */
}
</style>
<script type="text/javascript" charset="utf-8">
$(function() {
var menu = $('#menu'),
pos = menu.offset();</p>
<p> $(window).scroll(function(){
if ($(this).scrollTop() > pos.top && !menu.hasClass('fixed')) {
menu.addClass('fixed');
} else if ($(this).scrollTop() <= pos.top && menu.hasClass('fixed')) {
menu.removeClass('fixed');
}
});
});
</script>
</head>
<body></p>
<p><div id="navi">
<div id="menu" class="default">메뉴</div>
</div></p>
<p><!-- Content -->
<div style="height: 800px; background-color: #ddd;">
<!-- Add your page content here -->
</div></p>
<p></body>
</html></p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인