스크롤 내리면 메뉴 바 배경 색을 입히고 싶어요 채택완료
4455
3년 전
조회 3,217
저는 웹페이지에서 스클롤이 내리면 위에 헤더 부분을 같이 내려온는 자바스크립을 찾아서 넣어서 적용 시켰어요 근데 메뉴바가 위에 있을 때에는 배경 그림 때문에 색이 묻쳐서 잘 보이는데 스크롤이 밑으로 내려가면 div가 바탕 색이 투명 관계로 메뉴가 잘 보이지가 않아요 ㅠㅠ 이거 좀 해결 할 수 있게 가르쳐 주세요.
메뉴바가 내려가면 서서히 바탕색이 나타 날 수 있도록 하고 싶은데 저는 기숳이 없어서
다시 그림으로 설명할게요.
메뉴바가 뒤 이미지 덕에 잘 보이고
헤더 소스 입니다
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'); ?>
답변 1개
채택된 답변
+20 포인트
3년 전
</p>
<p>.down {background-color:rgba(0,99,255,.1);z-index:8}</p>
<p> </p>
<p>$(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'); //클래스 제거
}
});
});</p>
<p>
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인