스크롤 내리면 메뉴 바 배경 색을 입히고 싶어요
본문
저는 웹페이지에서 스클롤이 내리면 위에 헤더 부분을 같이 내려온는 자바스크립을 찾아서 넣어서 적용 시켰어요 근데 메뉴바가 위에 있을 때에는 배경 그림 때문에 색이 묻쳐서 잘 보이는데 스크롤이 밑으로 내려가면 div가 바탕 색이 투명 관계로 메뉴가 잘 보이지가 않아요 ㅠㅠ 이거 좀 해결 할 수 있게 가르쳐 주세요.
메뉴바가 내려가면 서서히 바탕색이 나타 날 수 있도록 하고 싶은데 저는 기숳이 없어서
다시 그림으로 설명할게요.
메뉴바가 뒤 이미지 덕에 잘 보이고
헤더 소스 입니다
<?php
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if (G5_IS_MOBILE) {
include_once(G5_THEME_MOBILE_PATH.'/head.php');
return;
}
if(G5_COMMUNITY_USE === false) {
define('G5_IS_COMMUNITY_PAGE', true);
include_once(G5_THEME_SHOP_PATH.'/shop.head.php');
return;
}
include_once(G5_THEME_PATH.'/head.sub.php');
include_once(G5_LIB_PATH.'/latest.lib.php');
include_once(G5_LIB_PATH.'/outlogin.lib.php');
include_once(G5_LIB_PATH.'/poll.lib.php');
include_once(G5_LIB_PATH.'/visit.lib.php');
include_once(G5_LIB_PATH.'/connect.lib.php');
include_once(G5_LIB_PATH.'/popular.lib.php');
?>
<!-- 상단 시작 { -->
<style type="text/css">
fd {
font-weight: bold;
}
asg {
font-size: 16px;
font-weight: bold;
}
t {
font-size: 16px;
font-weight: bold;
}
.ws #gnb .gnb_wrap .akl {
font-weight: bold;
font-size: 16px;
margin-top: 20px;
color: #fff;
text-decoration: none;
}
.ws {
position:fixed !important;
top:0;left:50%;
transform:translate(-50%,0);z-index:99; width:100%;
}
</style>
<h1 id="hd_h1"><?php echo $g5['title'] ?></h1>
<?php
if(defined('_INDEX_')) { // index에서만 실행
include G5_BBS_PATH.'/newwin.inc.php'; // 팝업레이어
}
?>
<div class="ws">
<nav id="gnb">
<h2>메인메뉴</h2>
<div class="gnb_wrap">
<div class="logo">진해장애인자립생활센터</div>
<div class="meu">
<ul id="gnb_1dul">
<li class="gnb_1dli gnb_mnal">
</li>
<?php
$menu_datas = get_menu_db(0, true);
$gnb_zindex = 999; // gnb_1dli z-index 값 설정용
$i = 0;
foreach( $menu_datas as $row ){
if( empty($row) ) continue;
$add_class = (isset($row['sub']) && $row['sub']) ? 'gnb_al_li_plus' : '';
?>
<li class="gnb_1dli <?php echo $add_class; ?>" style="z-index:<?php echo $gnb_zindex--; ?>">
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_1da"><?php echo $row['me_name'] ?></a>
<?php
$k = 0;
foreach( (array) $row['sub'] as $row2 ){
if( empty($row2) ) continue;
if($k == 0)
echo '<span class="bg">하위분류</span><div class="gnb_2dul"><ul class="gnb_2dul_box">'.PHP_EOL;
?>
<li class="gnb_2dli"><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>" class="gnb_2da"><?php echo $row2['me_name'] ?></a></li>
<?php
$k++;
} //end foreach $row2
if($k > 0)
echo '</ul></div>'.PHP_EOL;
?>
</li>
<?php
$i++;
} //end foreach $row
if ($i == 0) { ?>
<li class="gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 > 환경설정 > 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
<?php } ?>
</ul>
<div id="gnb_all">
<h2>전체메뉴</h2>
<ul class="gnb_al_ul">
<?php
$i = 0;
foreach( $menu_datas as $row ){
?>
<li class="gnb_al_li">
<a href="<?php echo $row['me_link']; ?>" target="_<?php echo $row['me_target']; ?>" class="gnb_al_a"><?php echo $row['me_name'] ?></a>
<?php
$k = 0;
foreach( (array) $row['sub'] as $row2 ){
if($k == 0)
echo '<ul>'.PHP_EOL;
?>
<li><a href="<?php echo $row2['me_link']; ?>" target="_<?php echo $row2['me_target']; ?>"><?php echo $row2['me_name'] ?></a></li>
<?php
$k++;
} //end foreach $row2
if($k > 0)
echo '</ul>'.PHP_EOL;
?>
</li>
<?php
$i++;
} //end foreach $row
if ($i == 0) { ?>
<li class="gnb_empty">메뉴 준비 중입니다.<?php if ($is_admin) { ?> <br><a href="<?php echo G5_ADMIN_URL; ?>/menu_list.php">관리자모드 > 환경설정 > 메뉴설정</a>에서 설정하실 수 있습니다.<?php } ?></li>
<?php } ?>
</ul>
<span style="font-weight: bold">
<button type="button" class="gnb_close_btn"></button>
</span></div>
</div>
<div class="akl">
<table width="307" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="66"><font size="3" onMouseOver="this.style.backgroundColor='#FFF4E9';" onMouseOut="this.style.backgroundColor=''">Facebook</td>
<td width="10" align="center">·</td>
<td width="57"><font size="3" onMouseOver="this.style.backgroundColor='#FFF4E9';" onMouseOut="this.style.backgroundColor=''">KOKAO</td>
<td width="174"> </td>
</tr>
</table>
</div>
<div id="gnb_all_bg"></div>
</div>
</nav>
<script>
$(function(){
$(".gnb_menu_btn").click(function(){
$("#gnb_all, #gnb_all_bg").show();
});
$(".gnb_close_btn, #gnb_all_bg").click(function(){
$("#gnb_all, #gnb_all_bg").hide();
});
});
<!-- 나타나는 메뉴 자바 -->
$(document).ready(function(){
var headHeight = $("ws").outerHeight() + $("ws").outerHeight();
function floatGnb(){
if($(window).scrollTop() > headHeight){
$("ws").addClass("ws");
}else{
$("ws").removeClass("ws");
}
}
$(window).scroll(function(){
floatGnb();
});
floatGnb();
});
</script>
</div>
</div>
<!-- 슬라이더 -->
<article class="slider">
<div class="slicker">
<div>
<div class="li" style="background-image: url(<?php echo G5_THEME_URL?>/img/bg-1.jpg);"></div>
</div>
<div>
<div class="li" style="background-image: url(<?php echo G5_THEME_URL?>/img/bg-2.jpg);"></div>
</div>
<div>
<div class="li" style="background-image: url(<?php echo G5_THEME_URL?>/img/bg-3.jpg);"></div>
</div>
</div>
</article>
<!-- } 상단 끝 --><!-- 콘텐츠 시작 { -->
<div id="wrapper">
<div id="container_wr">
<div id="container">
<?php if (!defined("_INDEX_")) { ?><h2 id="container_title"><span title="<?php echo get_text($g5['title']); ?>"><?php echo get_head_title($g5['title']); ?></span></h2><?php }
내려가면 배경도 흰색에 묻쳤어 메뉴바가 안보임.
답변 1
.down {background-color:rgba(0,99,255,.1);z-index:8}
$(function(){
var nava = $('#gnb,#tnb'); //헤더를 변수에 넣기
var page = $('#container'); //색상이 변할 부분
var pageOffsetTop = page.offset().top; //색상 변할 부분의 top값 구하기
$(window).resize(function(){ //반응형을 대비하여 리사이즈시 top값을 다시 계산
pageOffsetTop = page.offset().top;
});
$(window).on('scroll', function(){
if($(window).scrollTop() >= pageOffsetTop) { // 스크롤이 page보다 밑에 내려가면
nava.addClass('down'); //클래스 추가
} else { // 스크롤 올릴 때
nava.removeClass('down'); //클래스 제거
}
});
});
