댓글 목록

부트스트랩4 Scrollspy

페이지 정보

작성자 운영자 작성일 18-03-24 14:25 조회 1,517 댓글 0

동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.

scrollspy는 스크롤 위치를 기준으로 탐색 목록의 링크를 자동으로 업데이트하는 데 사용됩니다.


Scrollspy 만들기


<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-expand-sm bg-dark navbar-dark fixed-top">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" href="#section1">회사소개</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section2">프로그램</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#section3">자료실</a>
    </li>
    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown">
        강좌
      </a>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#section41">유료강좌</a>
        <a class="dropdown-item active" href="#section42">무료강좌</a>
      </div>
    </li>
  </ul>
</nav>

<div id="section1" class="container-fluid bg-success" style="padding-top:70px;padding-bottom:70px">
  <h1>회사소개</h1>
  <p>웹사이트를 만드려는 모든 분들, 웹사이트를 운영하고 있는 모든 분들, 모든 솔루션이 준비되어 있습니다.</p>
  <p>웹사이트를 만드려는 모든 분들, 웹사이트를 운영하고 있는 모든 분들, 모든 솔루션이 준비되어 있습니다.</p>
</div>
<div id="section2" class="container-fluid bg-warning" style="padding-top:70px;padding-bottom:70px">
  <h1>프로그램</h1>
  <p>웹사이트를 만드려는 모든 분들, 웹사이트를 운영하고 있는 모든 분들, 모든 솔루션이 준비되어 있습니다.</p>
  <p>웹사이트를 만드려는 모든 분들, 웹사이트를 운영하고 있는 모든 분들, 모든 솔루션이 준비되어 있습니다.</p>
</div>
<div id="section3" class="container-fluid bg-secondary" style="padding-top:70px;padding-bottom:70px">
  <h1>자료실</h1>
  <p>웹사이트를 만드려는 모든 분들, 웹사이트를 운영하고 있는 모든 분들, 모든 솔루션이 준비되어 있습니다.</p>
  <p>웹사이트를 만드려는 모든 분들, 웹사이트를 운영하고 있는 모든 분들, 모든 솔루션이 준비되어 있습니다.</p>
</div>
<div id="section41" class="container-fluid bg-danger" style="padding-top:70px;padding-bottom:70px">
  <h1>유료강좌</h1>
  <p>웹사이트를 만드려는 모든 분들, 웹사이트를 운영하고 있는 모든 분들, 모든 솔루션이 준비되어 있습니다.</p>
  <p>웹사이트를 만드려는 모든 분들, 웹사이트를 운영하고 있는 모든 분들, 모든 솔루션이 준비되어 있습니다.</p>
</div>
<div id="section42" class="container-fluid bg-info" style="padding-top:70px;padding-bottom:70px">
  <h1>무료강좌</h1>
  <p>웹사이트를 만드려는 모든 분들, 웹사이트를 운영하고 있는 모든 분들, 모든 솔루션이 준비되어 있습니다.</p>
  <p>웹사이트를 만드려는 모든 분들, 웹사이트를 운영하고 있는 모든 분들, 모든 솔루션이 준비되어 있습니다.</p>
</div>

</body>

스크롤 영역으로 사용해야 하는 요소에 data-spy="scroll"을 추가합니다. 위 예에서는 <body>에 추가했습니다.

그런 다음 id 또는 네비게이션(.navbar)의 클래스와 함께 data-target속성을 추가합니다. 이것은 탐색바와 스크롤 영역이 연결되어 있는지 확인하기 위한 것입니다.


스크롤하는 요소는 탐색바의 목록 항목안에 있는 링크의 ID와 일치해야 합니다.

(<div id="section1">은 <a href="#section1"와 일치합니다.)


data-offset속성은 스크롤의 위치를 계산할 때 맨 위에서 오프셋할 픽셀 수를 지정합니다.

스크롤 막대 요소로 점프(이동)할 때 네비게이션 내부의 링크가 너무 빨리 또는 너무 일찍 활성상태를 변경한다고 느낄 때 유용합니다. 기본값은 10px입니다.


** 상대 위치 지정 필요
data-spy="scroll"이 있는 요소에는 "relative"값이 있는 CSS position속성이 필요합니다.


Scrollspy 수직 메뉴


Scrollspy를 수직으로 표현할 수도 있습니다.

<body data-spy="scroll" data-target="#myScrollspy" data-offset="1">

  <div class="container-fluid">
    <div class="row">
      <nav class="col-sm-3 col-4" id="myScrollspy">
        <ul class="nav nav-pills flex-column">
          <li class="nav-item">
            <a class="nav-link active" href="#section1">회사소개</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#section2">프로그램</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#section3">자료실</a>
          </li>
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">강좌</a>
            <div class="dropdown-menu">
              <a class="dropdown-item" href="#section41">유료강좌</a>
              <a class="dropdown-item" href="#section42">무료강좌</a>
            </div>
          </li>
        </ul>
      </nav>
      <div class="col-sm-9 col-8">

        <div id="section1" class="bg-success">
          <h1>회사소개</h1>
          <p>웹사이트를 만드려는 모든 분들, 웹사이트를 운영하고 있는 모든 분들, 모든 솔루션이 준비되어 있습니다.</p>
          <p>웹사이트를 만드려는 모든 분들, 웹사이트를 운영하고 있는 모든 분들, 모든 솔루션이 준비되어 있습니다.</p>
        </div>
        <div id="section2" class="bg-warning">
          <h1>프로그램</h1>
          <p>웹사이트를 만드려는 모든 분들, 웹사이트를 운영하고 있는 모든 분들, 모든 솔루션이 준비되어 있습니다.</p>
          <p>웹사이트를 만드려는 모든 분들, 웹사이트를 운영하고 있는 모든 분들, 모든 솔루션이 준비되어 있습니다.</p>
        </div>
        <div id="section3" class="bg-secondary">
          <h1>자료실</h1>
          <p>웹사이트를 만드려는 모든 분들, 웹사이트를 운영하고 있는 모든 분들, 모든 솔루션이 준비되어 있습니다.</p>
          <p>웹사이트를 만드려는 모든 분들, 웹사이트를 운영하고 있는 모든 분들, 모든 솔루션이 준비되어 있습니다.</p>
        </div>
        <div id="section41" class="bg-danger">
          <h1>유료강좌</h1>
          <p>웹사이트를 만드려는 모든 분들, 웹사이트를 운영하고 있는 모든 분들, 모든 솔루션이 준비되어 있습니다.</p>
          <p>웹사이트를 만드려는 모든 분들, 웹사이트를 운영하고 있는 모든 분들, 모든 솔루션이 준비되어 있습니다.</p>
        </div>
        <div id="section42" class="bg-info">
          <h1>무료강좌</h1>
          <p>웹사이트를 만드려는 모든 분들, 웹사이트를 운영하고 있는 모든 분들, 모든 솔루션이 준비되어 있습니다.</p>
          <p>웹사이트를 만드려는 모든 분들, 웹사이트를 운영하고 있는 모든 분들, 모든 솔루션이 준비되어 있습니다.</p>
        </div>

  </div>
</div>
</body>


댓글목록 0

등록된 댓글이 없습니다.