채택완료

모바일 메뉴 고정할때 자연스럽게 내려오면서 고정시키고 싶은데..

2020-03-24 (화) 22:25:03 2,694

모바일 메뉴를 고정하고 싶어 찾은 소스인데

고정이 될때 위에서 아래로 자연스럽게 내려오면서 고정시키고 싶은데

소스에 어떤 것을 추가해야 할까요?

지금은 고정은 되는데 딱 붙어 있어서...

자연스럽게 내려오면서 고정시키고 싶습니다.

theme/basic/mobile/head.php 추가

Copy
<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":"50px"
            });
        }
    });
</script>
|

답변 2개 / 댓글 1개

채택된 답변
+20 포인트

16번째 줄  $('.hd')를 $('#hd') 로 바꿔보세요.

그리고 이런 메카니즘을 좀 더 이해하려면 아래 링크도 참고해 보시면 좋을 것 같습니다..

https://www.w3schools.com/howto/howto_js_navbar_sticky.asp

답변에 대한 댓글 1개

우선 답변 감사합니다.
알려주신데로 바꾸었는데 원하는 스타일로 안 되네요.

자연스럽게의 기준이 어떤걸하시고싶은건지 애매해서 유추되는 2가지방법을 얘기드려요

-시간차로 자연스럽게

#hd{transtion:0.75s all;}

-적당히 내려오다가 고정

04번쨰줄의 "parseInt(height) > 0" 의 0을 어느정도 내려오다가하고싶은값 {ex) hd의 높이값 } 으로변경         

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