스크롤바를 내리면 메인 이미지 위치가 변경되는 현상 도움 부탁드립니다.^^
관련링크
본문
사이트 링크했습니다.^^ 설명하기가 애매해서용 ㅎ
메인화면 보시면 스크롤바를 내리면 이미지가 올라가는게 보이실 겁니다.
<상단 고정메뉴를 지울 때는 그자리 그대로 있구요.. 메뉴를 넣으면 이렇게 됩니다 ㅠ >
head.php <?php include_once(G5_PATH.'/theme/basic/skin/nav/fixed/menu.php'); //상단 네비 ?>
어느 부분의 소스를 수정해야 할지 추가해야될지 고민입니다.
index.php
<?php
define('_INDEX_', true);
if (!defined('_GNUBOARD_')) exit; // 개별 페이지 접근 불가
if (G5_IS_MOBILE) {
include_once(G5_THEME_MOBILE_PATH.'/index.php');
return;
}
include_once(G5_THEME_PATH.'/head.php');
?>
<style type="text/css">
body{ background-image:url(theme/basic/img/sky1.jpg);
background-repeat:no-repeat
</style>
<div id="container">
<table width="970" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="544" align="left" valign="top" bgcolor="#000000"> </td>
</tr>
<tr>
<td height="300" align="left" valign="top"><img src="theme/basic/img/main_foot1.png" width="970" height="300"></td>
</tr>
<tr>
<td height="500" align="left" valign="top"> </td>
</tr>
</table>
<p> </p>
</div>
</div>
<?php
include_once(G5_THEME_PATH.'/tail_main.php');
?>
default.css
/* 중간 레이아웃 */
#wrapper {z-index:5;margin:0 auto;width:970px;border-right:0px solid #dde4e9;border-left:0px solid #dde4e9;zoom:1;}
#wrapper:after {display:block;visibility:hidden;clear:both;content:""}
#aside {float:right;margin:0 0 0 -1px;width:210px;border-left:1px solid #dde4e9}
#container {z-index:4;position:relative;float:left;padding:0px 16px 15px 15px;width:728px;min-height:500px;height:auto !important;height:500px;border-right:0px solid #dde4e9;font-size:1em;zoom:1}
#container:after {display:block;visibility:hidden;clear:both;content:""}
#container_title {margin-bottom:20px;font-size:1.2em;font-weight:bold}
답변 3
<td height="300" align="left" valign="top"><img src="theme/basic/img/main_foot1.png" width="970" height="300"></td>
를
<td style="padding-top:90px" height="300" align="left" valign="top"><img src="theme/basic/img/main_foot1.png" width="970" height="300"></td>
이렇게 style을 적용해보세요 padding-top 값은 조절하시고요
감사합니다..
padding-top:75px 을 해서 스크롤바를 내릴경우는 잘 됩니다..
그러나 스크롤바를 내리지 않는경우에는 padding-top:75px 가 적용되서 이미지가 내려가 있습니다..
default.css
이부분이 아니고 다른 메뉴 스크롤에 해당하는 css에 padding-top 를 적용시키셔야될것 같습니다.
답변 감사합니다.. 좀 더 생각을 해봐서 간단하게 해봤습니다..
일단 메뉴부분을 다른 파일로 만들지 않고.... 그냥 head.php 파일에서 만들었구요..
고정시키는 방법(팁자료실에 찾아봤어용^^)
<script type="text/javascript">
$(window).scroll(function () {
var height = $(document).scrollTop();
if (parseInt(height) > 0) {
$('#hd').css({
"position": "fixed",
"display": "block",
"width":"100%",
"z-index" : "10000"
});
$('#wrapper').css({
"padding-top":"105px"
});
} else {
$('.hd').css({
"display": "block",
"position":"relative",
"z-index" : "10000"
});
$('#wrapper').css({
"padding-top":"105px"
});
}
});
</script>
이렇게 해주니까 간단하게 되었습니다..^^ (전에는 스크롤바 내리면 흔들림?? 있었는데 없어졌구용^^)
쉽게 하고 싶었는데 메뉴파일 따로 만들지 않고 스크립트를 수정하니까 간단하게 되었네용^^
도움 주셔서 감사합니다..
확인해보니 .gnb_over 이 부분이 fixed 로 바뀌면서 상단의 영역이 줄어들기 때문에
이미지 위치가 위로 올라가는 것 같습니다.
구조가 왜 이런식인지는 모르겠고, 저같으면 처음부터 구조를 다시 짜겠습니다만,
현상태로 해결하는 방법은
.gnb_over 가 fixed 로 바뀌는 시점에서 (이 부분도 스크립트나 제이쿼리로 처리했을테니)
해당 td 부분에 id나 클래스를 주던지해서 $(".gnb_over").height() 만큼 padding-top 을 주면 될 것 같습니다.
예시)
<td class="top_img" height="300" align="left" valign="top"><img src="theme/basic/img/main_foot1.png" width="970" height="300"></td>
상단 메뉴가 fixed로 바뀔때 찾아서
$(".top_img").css('padding-top', $(".gnb_over").height());
답변 감사합니다.. 저 위에 쓴 댓글처럼 간단한걸루 해서 했습니다.^^ 도움 감사합니당
