이야기앱 세상

jQuery - 스크롤시 메뉴는 고정되고 내용은 스크롤되도록 처리하기 본문

IT/jQuery

jQuery - 스크롤시 메뉴는 고정되고 내용은 스크롤되도록 처리하기

storya 2018. 12. 24. 22:12
반응형

jQuery - 스크롤시 메뉴는 고정되고 내용은 스크롤되도록 처리하기


스크롤시 로고 영역은 스크롤되지만 메뉴는 상단에 고정한 후 내용은 계속 스크롤 처리하게 할 수 있다. 메뉴의 수직 위치를 측정해서 스크롤바의 위치가 메뉴의 수직 위치보다 크면(스크롤바의 위치가 아래일 경우) 메뉴 영역이 고정되게 처리한다. jQuery의 .offset() 메서드를 이용해서 선택한 태그의 위치를 알아낸다.


[스타일을 표시 부분]

<style>

body {

  margin: 0px;

  padding: 0px;

}

div.main-menu {

  background-color: skyblue;

  width: 100%;

  padding:20px 0;

}

div.main-menu ul{

list-style: none;

}

div.main-menu ul li{

display: inline;

}

div.main-container{

text-align: center;

padding:10px;

}

.menu-fixed {

  position: fixed;

  top: 0px;

  left:0px;

}

.logo{

border-radius: 50%;

padding:10px;

}

</style>


[스크립트 표시 부분]

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function() {

//상대적인 좌표 값을 반환, .offset()가 반환 하는 객체는 left와 top 속성을 제공

//top 속성을 이용해서 메뉴의 수직 위치를 구함

    var menu_offset = $('.main-menu').offset();

    //스크롤 바를 스크롤할 때 매개변수로 전달된 함수를 실행시킴

    $(window).scroll(function() {

    //문서의 스크롤바 위치와 메뉴의 수직 위치를 비교해서 

    //문서의 스크롤바 위치가 메뉴의 수직 위치보다 크면(위치로 표현하면 아래)

      if ($(document).scrollTop() > menu_offset.top) {

      //메뉴에 menu-fixed 클래스를 추가해서 메뉴를 고정시킴

        $('.main-menu').addClass('menu-fixed');

      }else {

      //메뉴에서 menu-fized 클래스를 제거해서 메뉴를 수직으로 이동할 수 있도록 처리함

        $('.main-menu').removeClass('menu-fixed');

      }

    });

  });

</script>


[HTML 태그 표시 부분]


<body>

    <img src="flower.jpg" width="50" height="50" class="logo">

    <div class="main-menu">

      <ul>

        <li>회사소개</li>

        <li>상품정보</li>

        <li>오시는 길</li>

      </ul>

    </div>

    <div class="main-container">

       <img src="rue.jpg">

    </div>

  </body>


[스크롤하기 전]




[스크롤한 후]



반응형
0 Comments
댓글쓰기 폼