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

본문 바로가기
사이트 내 전체검색

기술자료

JavaScript [jQuery] 웹브라우저 상단 및 하단 고정하기

페이지 정보

댓글 0건 조회 3,356회 작성일 2017-01-03 17:11 ~ 2018-08-02 18:53

본문

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


1. HTML + CSS

샘플 : http://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

샘플 : http://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
 
  • 트위터로 보내기
  • 페이스북으로 보내기
  • 구글플러스로 보내기
  • 카카오톡으로 보내기

댓글목록

등록된 댓글이 없습니다.


Total 175건 1 페이지
기술자료 목록
번호 제목
175 HTML   23  2018-10-14 01:19 ~ 2018-10-14 02:09  
174 HTML   249  2018-08-30 15:47  
173 HTML   286  2018-08-27 14:33  
172 HTML   450  2018-08-26 14:07  
171 HTML   248  2018-08-18 05:37  
170 HTML   599  2018-08-17 06:39  
169 HTML   468  2018-08-15 05:06 ~ 2018-08-15 05:58  
168 HTML   192  2018-08-13 18:50  
167 HTML   313  2018-08-09 10:12 ~ 2018-08-09 13:26  
166 HTML   439  2018-07-23 02:20 ~ 2018-07-23 14:33  
165 HTML   256  2018-07-17 18:38  
164 HTML   313  2018-07-04 23:27  
163 HTML   445  2018-07-04 15:02  
162 HTML   970  2018-03-28 20:58  
161 HTML   898  2018-03-21 19:00  
160 HTML   3686  2018-03-08 19:40 ~ 2018-03-11 23:33  
159 HTML   2033  2018-02-27 05:31 ~ 2018-03-16 04:39  
158 HTML   1275  2017-12-18 22:36  
157 HTML   2027  2017-09-28 12:23 ~ 2018-10-09 09:17  
156 HTML   2161  2017-09-18 23:09  
게시물 검색

회원로그인

계좌이체 or 신용카드 결제하기
해피정닷컴으로 대금결제를 할 수 있습니다

접속자집계

오늘
1,752
어제
2,925
최대
3,174
전체
4,317,991

회사명: 해피정닷컴   사업자번호: 119-05-36414   전화: 070-7600-3500   팩스: 02-865-3528   주소: 08394 서울시 구로구 디지털로 242 한화비즈메트로1차 1502호
대표: 정창용   개인정보보호책임자: 정창용   통신판매업신고번호: 2014-서울구로-0074 [사업자등록정보확인]   건강기능식품영업신고번호 제2018-0080452호
Copyright 2001~2018 해피정닷컴. All Rights Reserved.