동영상 강좌는 유튜브 채널 '웹학교'를 이용하시기 바랍니다.
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>등록된 댓글이 없습니다.