05-02 06:32
Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

Scientific Computing & Data Science

[Programming / WebApp] 스크롤 시 메뉴 콘텐츠 고정하기 본문

Programming/Web App

[Programming / WebApp] 스크롤 시 메뉴 콘텐츠 고정하기

cinema4dr12 2016. 8. 17. 11:12

이번 글에서는 HTML 페이지에서 페이지를 스크롤 다운(Scroll Down) 시 일정 이상이 스크롤 다운되면 콘텐츠가 고정되는 예제입니다.

웹페이지를 스크롤 다운하다가 상단의 메뉴가 사라지면 메뉴를 클릭하기 위해 다시 웹페이지를 스크롤 업(Scroll Up)해야 하는 불편함이 있습니다.

본 예제는 이러한 불편함을 제거해 주는 기능 구현에 관한 것이며, 대다수의 모던 웹페이지들이 채택하는 것이기도 합니다.

HTML

다음 HTML 문서는 예제용 문서이며, 핵심은 JavaScript 코드임을 명심하길 바랍니다.

scroll-fixed.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fixed Content</title>
<link rel="stylesheet" href="./scroll-fixed.css"/>
</head>

<body>
  <div class="scroll-title">
    <h1>Example - Fixed Content While Scrolling</h1>
  </div>
  <div class="scroll-menu">
    <p>
      <a href="#">1st Menu</a>
      <a href="#">2nd Menu</a>
      <a href="#">3rd Menu</a>
    </p>
  </div>
  <div class="scroll-content"></div>
</body>

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="./scroll-fixed.js"></script>

</html>

Sass

CSS의 전처리기인 Sass 파일로 작성하였습니다.

Sass 파일을 컴파일하는 방법은 CSS 전처리기 - Sass를 참고하기 바라며, 귀찮더라도 이 기회에 공부한다 생각하고 꼭 한 번 살펴보기를 권장합니다.

왜냐하면 Sass를 활용하면 코드를 조직화/체계화 할 수 있어 코드 관리에 매우 유용하기 때문입니다.


scroll-fixed.sass

body
    margin: 0px
    padding: 0px

.scroll-title
    text-align: center

.scroll-menu
    text-align: center
    background-color: #14ada0
    padding: 10px 0px
    width: 100%

.scroll-content
    height: 2000px

.scroll-fixed
    position: fixed
    top: 0px

JavaScript

본 예제의 핵심이 되는 것이 JavaScript 코드입니다.

scroll-fixed.js

$(function() {

  $(document).ready(function() {

    var scrollOffset = $('.scroll-menu').offset();

    $(window).scroll(function() {
      if ($(document).scrollTop() > scrollOffset.top) {
        $('.scroll-menu').addClass('scroll-fixed');
      }
      else {
        $('.scroll-menu').removeClass('scroll-fixed');
      }
    });
  } );

});


핵심이 되는 부분은 if ($(document).scrollTop() > scrollOffset.top)입니다.

이것은 일정 높이만큼 웹페이지를 스크롤 다운하면 scroll-menu의 위치를 고정(fixed)하게 만드는 것입니다.

이로써 본 예제를 마친다. 실제 웹페이지 제작에 매우 유용한 예제이므로 잘 활용하기 바랍니다.

'Programming > Web App' 카테고리의 다른 글

[Programming / WebApp] Form Data 전송  (0) 2016.09.04
[Programming / WebApp] Express Template Engine / Pug  (0) 2016.09.03
[Programming / WebApp] CSS 전처리기 – Sass  (0) 2016.08.15
[Programming / WebApp] Canvas Touch Gesture 예제  (0) 2016.08.03
[Programming / WebApp] Modal Dialog 예제  (1) 2016.07.28
공유하기 링크
'Programming/Web App' Related Articles more
Comments