공백이생겨요
본문
[code]
<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":"116px"
});
} else {
$('.hd').css({
"display": "block",
"position":"relative",
"z-index" : "10000"
});
$('#wrapper').css({
"padding-top":"116px"
});
}
});
</script>
[code]
위 내용을 삽입하여 상단메뉴를 고정하려고 하는데요.
메뉴윗부분의 로고이미지등은 빼고 메뉴줄만 고정하려고 합니다.
그런데 공백이 생기네요!.
그림첨부합니다!
↑위처럼 메뉴만 고정되어 따라내려오는데 로고이미지가 있던 부분만큼 공백이 생기네요
↑위처럼 로고이미지 부분의 여백없이 메뉴가 딱위에 붙어있고 싶습니다!
메뉴부분을 hd에서 빼보기도 했는데 안대네요.. 도움부탁드립니다!
답변 2
"padding-top":"116px"
부분 제거 하시면 될듯 하네요
메뉴만 위로 올리는게 아니고 로고등이 안보이게 해줘야합니다.
1. css 수정
<div id="hd">
아래부터
<nav id="gnb">
위까지
<div id="hd_top">
</div>
로 감싸주세요.
2. 스크립트 수정
<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"
});
$('#hd_top').css({
"display": "none"
});
$('#wrapper').css({
"padding-top":"116px"
});
} else {
$('#hd').css({
"display": "block",
"position":"relative",
"z-index" : "10000"
});
$('#hd_top').css({
"display": "block"
});
$('#wrapper').css({
"padding-top":"0px"
});
}
});
</script>
감사합니다! 주신대로 하니까 바로대네요!!!! 정말 감사해요!!
근데 실수로 다른분 글을 채택눌럿네요 ㅠㅠㅠㅠ ;;;;;