목록으로

상단메뉴 고정은 어떻게 할 수 있나요? 채택완료

허걱김선생

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전 조회 1,454

답변 2

수고하십니다.

상단 메뉴 부분을 고정하고 싶어서

아래와 같은 팁을 적용해 보았습니다.

그런데

스크롤 하면 메뉴가 고정은 안되고

회색 바탕이 메뉴 크기만큼 나와서 따라 다닙니다.;;;

검색 부분도 빼고 딱 메뉴만 고정하고 싶은데

조언 좀 얻을 수 있을까요?

감사합니다.

</p>

<p><script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"" target="_blank" rel="noopener noreferrer">http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"</a> charset="utf-8"></script><!--topmenu_fixed-->

<script type="text/javascript" charset="utf-8">

        $(function() {$(function(){

    var menu = $('#menu'),

        pos = menu.offset();

        

        $(window).scroll(function(){

            if($(this).scrollTop() > pos.top+menu.height() && menu.hasClass('default')){

                menu.fadeOut('fast', function(){

                    $(this).removeClass('default').addClass('fixed').fadeIn('fast');

                });

            } else if($(this).scrollTop() <= pos.top && menu.hasClass('fixed')){

                menu.fadeOut('fast', function(){

                    $(this).removeClass('fixed').addClass('default').fadeIn('fast');

                });

            }

        });

});

});</script></p>

<p><style TYPE="text/css">

#navi {}

#menu {text-align: center;margin: 0 auto;padding: 0;}

.fixed {position: fixed;top: -5px;left: 0;width: 100%;

    box-shadow: 0 0 40px #000;

    -webkit-box-shadow: 0 0 40px #000;

    -moz-box-shadow: 0 0 40px #000;

</style> 

 </p>

<p><div id="navi">

    <div id="menu" class="default">메뉴</div>

</div></p>

<p>

#메뉴고정

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

답변 2개

정렬:

채택된 답변

+20 포인트

제이앤

프로필 보기 이 회원 글보기 이 회원의 댓글보기

2년 전

안녕하세요.

아래의 코드를 참고해 보시겠어요?

</p>

<p><!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Fixed Menu</title>

    <script type="text/javascript" src="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"" target="_blank" rel="noopener noreferrer">http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"</a> charset="utf-8"></script>

    <style>

        body {

            margin: 0;

            padding: 0;

        }</p>

<p>        #navi {

            width: 100%;

            background-color: #f0f0f0; /* 배경색 지정 */

            z-index: 1000; /* 다른 요소 위에 위치 */

        }</p>

<p>        #menu {

            text-align: center;

            margin: 0 auto;

            padding: 10px; /* 메뉴의 패딩을 추가하여 여백 확보 */

            transition: all 0.3s ease-in-out; /* 부드러운 변화를 위한 트랜지션 추가 */

        }</p>

<p>        .fixed {

            position: fixed;

            top: 0;

            left: 0;

            width: 100%;

            box-shadow: 0 0 40px #000;

            -webkit-box-shadow: 0 0 40px #000;

            -moz-box-shadow: 0 0 40px #000;

            background-color: #f0f0f0; /* 고정되었을 때의 배경색 지정 */

        }

    </style>

    <script type="text/javascript" charset="utf-8">

        $(function() {

            var menu = $('#menu'),

                pos = menu.offset();</p>

<p>            $(window).scroll(function(){

                if ($(this).scrollTop() > pos.top && !menu.hasClass('fixed')) {

                    menu.addClass('fixed');

                } else if ($(this).scrollTop() <= pos.top && menu.hasClass('fixed')) {

                    menu.removeClass('fixed');

                }

            });

        });

    </script>

</head>

<body></p>

<p><div id="navi">

    <div id="menu" class="default">메뉴</div>

</div></p>

<p><!-- Content -->

<div style="height: 800px; background-color: #ddd;">

    <!-- Add your page content here -->

</div></p>

<p></body>

</html></p>

<p>

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

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