스크롤바를 내려도 메뉴가 상단에 고정되게 하려면..
본문
* 적용한 사이트 : http://27.102.207.19/~word/
http://tomonari.co.kr 이곳 메뉴처럼 적용하려 합니다....
스크롤바를 내려도 메뉴가 상단에 고정되게끔 하려고 합니다.
// 수정한 곳 과 수정한 소스
skin/shop/sirex/boxcategory.skin.php
-> 아래와 같이 gnb 부분이 메뉴부분같아서 자바소스에 gnb를 넣었더니 적용한 사이트 처럼 가운데로 안뜨고
제대로 작동을 안하네요... CSS 부분이 문제 인것같은데 ㅠㅠ gnb에 관련된 CSS를 수정해주어야 하는건가요?...
고수님들 한수 부탁드리겠습니다....
<!-- ★ 상단 메뉴 고정 스크롤 자바스크립트-->
</ul>
$(function(){ // document ready
if (!!$('#gnb').offset()) { // make sure "#gnb" element exists
var stickyTop = $('#gnb').offset().top; // returns number
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stickyTop < windowTop){
$('#gnb').css({ position: 'fixed', top: 0 });
}
else {
$('#gnb').css('position','static');
}
});
}
});
</script>
<!-- ★ 상단 메뉴 고정 스크롤 자바스크립트-->
<!-- 쇼핑몰 카테고리 시작 { -->
<nav id="gnb">
<h2>쇼핑몰 카테고리</h2>
<div class="hd_inner">
<ul id="gnb_1dul">
<?php
// 1단계 분류 판매 가능한 것만
$hsql = " select ca_id, ca_name from {$g5['g5_shop_category_table']} where length(ca_id) = '2' and ca_use = '1' order by ca_id ";
$hresult = sql_query($hsql);
for ($i=0; $row=sql_fetch_array($hresult); $i++)
{
// 2단계 분류 판매 가능한 것만
$sql2 = " select ca_id, ca_name from {$g5['g5_shop_category_table']} where LENGTH(ca_id) = '4' and SUBSTRING(ca_id,1,2) = '{$row['ca_id']}' and ca_use = '1' order by ca_id ";
$result2 = sql_query($sql2);
$count = mysql_num_rows($result2);
?>
<li class="gnb_1dli" style="z-index:<?php echo $gnb_zindex; ?>">
<a href="<?php echo G5_SHOP_URL.'/list.php?ca_id='.$row['ca_id']; ?>" class="gnb_1da<?php if ($count) echo ' gnb_1dam'; ?>"><?php echo $row['ca_name']; ?></a>
<?php
for ($j=0; $row2=sql_fetch_array($result2); $j++)
{
if ($j==0) echo '<ul class="gnb_2dul">';
?>
<li class="gnb_2dli"><a href="<?php echo G5_SHOP_URL; ?>/list.php?ca_id=<?php echo $row2['ca_id']; ?>" class="gnb_2da gnb_2da<?php echo $j%2; ?>"><?php echo $row2['ca_name']; ?></a></li>
<?php }
if ($j>0) echo '</ul>';
?>
</li>
<?php } ?>
</ul>
답변 2
nav#gnb{width:100%}
해보세요.
위분 답변이 맞습니다.
제가 테스트한 전체 소스
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<style>
body{margin:0 auto;}
div{height:100000px;}
#gnb{width:100%;height:60px;background-color:black;}
</style>
<body>
<nav id="gnb">
</nav>
<div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(function(){ // document ready
if (!!$('#gnb').offset()) { // make sure "#gnb" element exists
var stickyTop = $('#gnb').offset().top; // returns number
$(window).scroll(function(){ // scroll event
var windowTop = $(window).scrollTop(); // returns number
if (stickyTop < windowTop){
$('#gnb').css({ position: 'fixed', top: '0px'});
}
else {
$('#gnb').css('position','static');
}
});
}
});
</script>
</html>