상단메뉴 고정은 어떻게 할 수 있나요?
본문
수고하십니다.
상단 메뉴 부분을 고정하고 싶어서
아래와 같은 팁을 적용해 보았습니다.
그런데
스크롤 하면 메뉴가 고정은 안되고
회색 바탕이 메뉴 크기만큼 나와서 따라 다닙니다.;;;
검색 부분도 빼고 딱 메뉴만 고정하고 싶은데
조언 좀 얻을 수 있을까요?
감사합니다.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" 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>
<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>
<div id="navi">
<div id="menu" class="default">메뉴</div>
</div>
답변 2
안녕하세요.
아래의 코드를 참고해 보시겠어요?
<!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="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" charset="utf-8"></script>
<style>
body {
margin: 0;
padding: 0;
}
#navi {
width: 100%;
background-color: #f0f0f0; /* 배경색 지정 */
z-index: 1000; /* 다른 요소 위에 위치 */
}
#menu {
text-align: center;
margin: 0 auto;
padding: 10px; /* 메뉴의 패딩을 추가하여 여백 확보 */
transition: all 0.3s ease-in-out; /* 부드러운 변화를 위한 트랜지션 추가 */
}
.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();
$(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>
<div id="navi">
<div id="menu" class="default">메뉴</div>
</div>
<!-- Content -->
<div style="height: 800px; background-color: #ddd;">
<!-- Add your page content here -->
</div>
</body>
</html>
감사합니다.
위 소스도 잘 되는 거였네요. ^^;;
z-index: 9999; 추가 해주니까 숨어 있던 메뉴가 나타났어요.
답변 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
