스크롤바를 내리면 메인 이미지 위치가 변경되는 현상 도움 부탁드립니다.^^ 채택완료
사이트 링크했습니다.^^ 설명하기가 애매해서용 ㅎ
메인화면 보시면 스크롤바를 내리면 이미지가 올라가는게 보이실 겁니다.
<상단 고정메뉴를 지울 때는 그자리 그대로 있구요.. 메뉴를 넣으면 이렇게 됩니다 ㅠ >
head.php
어느 부분의 소스를 수정해야 할지 추가해야될지 고민입니다.
index.php
if (G5_IS_MOBILE) { include_once(G5_THEME_MOBILE_PATH.'/index.php'); return; }
include_once(G5_THEME_PATH.'/head.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개
를
이렇게 style을 적용해보세요 padding-top 값은 조절하시고요
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
확인해보니 .gnb_over 이 부분이 fixed 로 바뀌면서 상단의 영역이 줄어들기 때문에
이미지 위치가 위로 올라가는 것 같습니다.
구조가 왜 이런식인지는 모르겠고, 저같으면 처음부터 구조를 다시 짜겠습니다만,
현상태로 해결하는 방법은
.gnb_over 가 fixed 로 바뀌는 시점에서 (이 부분도 스크립트나 제이쿼리로 처리했을테니)
해당 td 부분에 id나 클래스를 주던지해서 $(".gnb_over").height() 만큼 padding-top 을 주면 될 것 같습니다.
예시)
상단 메뉴가 fixed로 바뀔때 찾아서
$(".top_img").css('padding-top', $(".gnb_over").height());
답변에 대한 댓글 1개
댓글을 작성하려면 로그인이 필요합니다.
답변에 대한 댓글 1개
일단 메뉴부분을 다른 파일로 만들지 않고.... 그냥 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>
이렇게 해주니까 간단하게 되었습니다..^^ (전에는 스크롤바 내리면 흔들림?? 있었는데 없어졌구용^^)
쉽게 하고 싶었는데 메뉴파일 따로 만들지 않고 스크립트를 수정하니까 간단하게 되었네용^^
도움 주셔서 감사합니다..
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인
padding-top:75px 을 해서 스크롤바를 내릴경우는 잘 됩니다..
그러나 스크롤바를 내리지 않는경우에는 padding-top:75px 가 적용되서 이미지가 내려가 있습니다..