상단 메뉴 고정 부드럽게 스크롤하기 (점프 안함)
구글링해서 찾았습니다
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 팁자료실
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 |
|---|---|---|---|---|
| 공지 | 3년 전 | 4402 | ||
| 2634 | 6개월 전 | 609 | ||
| 2633 | 6개월 전 | 599 | ||
| 2632 |
|
6개월 전 | 508 | |
| 2631 | 6개월 전 | 569 | ||
| 2630 |
세르반데스
|
6개월 전 | 538 | |
| 2629 | 6개월 전 | 727 | ||
| 2628 | 6개월 전 | 412 | ||
| 2627 | 6개월 전 | 417 | ||
| 2626 |
이슈DEV
|
7개월 전 | 636 | |
| 2625 |
welcome
|
7개월 전 | 645 | |
| 2624 |
이슈DEV
|
7개월 전 | 449 | |
| 2623 | 7개월 전 | 407 | ||
| 2622 | 7개월 전 | 496 | ||
| 2621 | 7개월 전 | 351 | ||
| 2620 |
|
7개월 전 | 370 | |
| 2619 | 7개월 전 | 479 | ||
| 2618 | 7개월 전 | 465 | ||
| 2617 | 7개월 전 | 555 | ||
| 2616 | 7개월 전 | 678 | ||
| 2615 | 7개월 전 | 582 | ||
| 2614 | 7개월 전 | 410 | ||
| 2613 |
바닐라코드
|
8개월 전 | 730 | |
| 2612 | 8개월 전 | 594 | ||
| 2611 | 8개월 전 | 731 | ||
| 2610 | 8개월 전 | 967 | ||
| 2609 | 8개월 전 | 508 | ||
| 2608 | 8개월 전 | 653 | ||
| 2607 | 8개월 전 | 631 | ||
| 2606 | 8개월 전 | 576 | ||
| 2605 | 8개월 전 | 602 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기