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

상단 메뉴 고정 부드럽게 스크롤하기 (점프 안함)

구글링해서 찾았습니다

kcmschool.com/15 에서 찾았습니다
pc mobile에서 스크롤 시 점프없이 상단 메뉴 고정됩니다

---> /js/jquery-1.8.3.min.js 사용

<script type="text/javascript">
    $(document).ready(function(){
        var topBar = $("#topBar").offset();
        $(window).scroll(function(){
            var docScrollY = $(document).scrollTop()
            var barThis = $("#topBar")
            var fixNext = $("#fixNextTag")
            if( docScrollY > topBar.top ) {
                barThis.addClass("top_bar_fix");
                fixNext.addClass("pd_top");
            }else{
                barThis.removeClass("top_bar_fix");
                fixNext.removeClass("pd_top");
            }
        });
    })
</script>

<style type="text/css">
body {margin:0;padding:0;}
.wrap{font-size:70px}
.wrap div{width:100%; text-align:center; font-size:70px; color:#fff;}
.top_bar_fix{position:fixed; top:0; left:0;}
.pd_top{padding-top:150px;}
.wrap .top_bn_zone{height:300px; background:#777; line-height:30px;}
.wrap .top_fix_zone{clear:both; height:150px; background:#d63232; line-height:30px;}
.wrap .top_con_zone{clear:both; background:#ededed; color:#888; text-align:center; font-size:70px;}
</style>

</head>
<body>
        
<div class="wrap">

 <div class="top_bn_zone">
        <br><br>상단 title 영역
 </div>

 <div class="top_fix_zone" id="topBar">
        <br><br>상단 MENU 고정 영역
 </div>

 <div class="top_con_zone" id="fixNextTag">
        하단 contents 영역
 </div>

</div>

댓글 작성

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

로그인하기

댓글 8개

감사합니다
좋은 정보 감사합니다.
정보 감사합니다.
경계선에서 흰색바탕이 보이는 부분 안보이게는

게시판 목록

그누보드5 팁자료실

글쓰기
🐛 버그신고