테스트 사이트 - 개발 중인 베타 버전입니다

공백이생겨요 채택완료

웅쿵쿵 6년 전 조회 2,448

[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개

채택된 답변
+20 포인트
6년 전

                "padding-top":"116px" 
부분 제거 하시면 될듯 하네요

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

Dessi
6년 전

메뉴만 위로 올리는게 아니고 로고등이 안보이게 해줘야합니다.

 

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>

 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

웅쿵쿵
6년 전
감사합니다! 주신대로 하니까 바로대네요!!!! 정말 감사해요!!

근데 실수로 다른분 글을 채택눌럿네요 ㅠㅠㅠㅠ ;;;;;

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인