[jQuery] 웹브라우저 상단 및 하단 고정하기 > 기술자료

• 목록

상단 메뉴를 브라우저 상단에 고정해서 보이고 싶을때


고정메뉴가 스크롤할때 반쯤 숨는 경우에는 아래의 내용을 확인하세요.
안드로이드 fixed 관련 버그로 버그(?)로 인하여 user-scalable=yes 를 no 로 변경해야합니다.
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=0,maximum-scale=10,user-scalable=no">



1. HTML + CSS

샘플 : https://www.happyjung.com/demo/css/fixed_layout.html

<div style="width:100%; position:fixed; top:0px; left:0px; z-index:10000000;">
<div style="height:100px;"><!--고정높이 지정-->
메뉴
</div>
</div>
<div style="height:100px;"><!--상단고정높이만큼 높이를 지정--></div>

본문




2. HTML + CSS + jQuery

샘플 : https://www.happyjung.com/demo/css/fixed_layout_jquery.html

<style>
* { margin: 0px; padding: 0px; }
.FixedLayoutTop { width: 100%; }
.FixedLayoutfunction { position: fixed; top: 0px; }
.FixedLayoutContent { margin-bottom:50px; } /* FixedLayoutBottom 의 영역만큼 여백을 추가 */
.FixedLayoutBottom { position: fixed; bottom: 0px; width: 100%; }
</style>

<script src="//code.jquery.com/jquery-1.12.4.min.js"></script>
<script>
  $( document ).ready( function() {
    var FixedLayoutOffset = $( '.FixedLayoutTop' ).offset();
    $( window ).scroll( function() {
      if ( $( document ).scrollTop() > FixedLayoutOffset.top ) {
        $( '.FixedLayoutTop' ).addClass( 'FixedLayoutfunction' );
      }
      else {
        $( '.FixedLayoutTop' ).removeClass( 'FixedLayoutfunction' );
      }
    });
  } );
</script>

<div style="height:100px;">
    <h1>Site Title</h1>
</div>

<div class="FixedLayoutTop">
    menu1 
    &nbsp;|&nbsp;
    menu2
    &nbsp;|&nbsp;
    menu3
</div>


<div style="height:2000px;"></div>



참고자료
https://www.cmsfactory.net/node/10383 
http://www.erzsamatory.net/27