• Q&A
  • 회원가입
  • 로그인

[basic] BS3 - Scrollspy (스크롤스파이) - 원페이지메뉴링크 (= 내부링크) ※매뉴얼제작

BS3

 

Scrollspy 예제 - 상단고정메뉴

 

... 

 <style>

  body {position: relative; }

  #section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}

  #section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}

  #section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}

  #section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}

  #section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}

  </style>

</head>

 

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


<nav class="navbar navbar-inverse navbar-fixed-top">

  <div class="container-fluid">

    <div class="navbar-header">

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>

          <span class="icon-bar"></span>                        

      </button>

      <a class="navbar-brand" href="#">홈짱닷컴</a>

    </div>

    <div>

      <div class="collapse navbar-collapse" id="myNavbar">

        <ul class="nav navbar-nav">

          <li><a href="#section1">HTML</a></li>

          <li><a href="#section2">CSS</a></li>

          <li><a href="#section3">JS</a></li>

          <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">서버측 <span class="caret"></span></a>

            <ul class="dropdown-menu">

              <li><a href="#section41">PHP</a></li>

              <li><a href="#section42">SQL</a></li>

            </ul>

          </li>

        </ul>

      </div>

    </div>

  </div>

</nav>    


<div id="section1" class="container-fluid">

  <h1>HTML</h1>

  <p>뼈대</p>

</div>

<div id="section2" class="container-fluid">

  <h1>CSS</h1>

  <p>디자인</p>

</div>

<div id="section3" class="container-fluid">

  <h1>JS</h1>

  <p>동작기능</p>

</div>

<div id="section41" class="container-fluid">

  <h1>PHP</h1>

  <p>웹서버와 DB 중계처리</p>

</div>

<div id="section42" class="container-fluid">

  <h1>SQL</h1>

  <p>DB관리</p>

</div>


</body>

...

 

결과보기 


[코드설명] 

 

data-spy="scroll"

"스크롤가능영역"으로 사용해야하는 요소에 추가. (보통, body 요소)
※ 해당 요소가 올바르게 작동하려면 position:relative 속성 필요.

 

메뉴 링크타겟(href="#section1")과 스크롤요소의 아이디(id="section1")가 대응되는지 확인.

 

data-target=".navbar"

네비게이션바의 (class 또는 ID) 입력. 네이게이션바가 "스크롤가능영역"과 연결되었는지 확인.

 

data-offset="50"

스크롤 위치 계산할 때, 위에서 오프셋 할 픽셀수 지정. (기본값: 10)

스크롤요소로 이동할 때 메뉴바 링크  활성상태가 너무 빨리 바뀐다 여겨질 때 설정하면 유용. 

 

 

Scrollspy 예제 - 좌측고정메뉴

 

...

<head>

...

  <style>

  body { position: relative;}

  ul.nav-pills {

    top: 20px;

    position: fixed;

  }

  div.col-sm-9 div {

    height: 250px;

    font-size: 28px;

  }

  #section1 {color: #fff; background-color: #1E88E5;}

  #section2 {color: #fff; background-color: #673ab7;}

  #section3 {color: #fff; background-color: #ff9800;}

  #section41 {color: #fff; background-color: #00bcd4;}

  #section42 {color: #fff; background-color: #009688;}

  

  @media screen and (max-width:750px ) {

    #section1, #section2, #section3, #section41, #section42  {

      margin-left: 0px;

    }

  }

  </style>

</head>

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


<div class="container">

  <div class="row">

    <nav class="col-xs-4 col-sm-3" id="myScrollspy">

      <ul class="nav nav-pills nav-stacked">

        <li class="active"><a href="#section1">HTML</a></li>

        <li><a href="#section2">CSS</a></li>

        <li><a href="#section3">JS</a></li>

        <li class="dropdown">

          <a class="dropdown-toggle" data-toggle="dropdown" href="#">서버측<span class="caret"></span></a>

          <ul class="dropdown-menu">

            <li><a href="#section41">PHP</a></li>

            <li><a href="#section42">SQL</a></li>                     

          </ul>

        </li>

      </ul>

    </nav>

    <div class="col-xs-8 col-sm-9">

      <div id="section1">    

        <h1>HTML</h1>

        <p>뼈대</p>

      </div>

      <div id="section2"

        <h1>CSS</h1>

        <p>디자인</p>

      </div>        

      <div id="section3">         

        <h1>JS</h1>

        <p>동작기능</p>

      </div>

      <div id="section41">         

        <h1>PHP</h1>

        <p>웹서버와 DB 중계</p>

      </div>      

      <div id="section42">         

        <h1>SQL</h1>

        <p>DB</p>

      </div>

    </div>

  </div>

</div>


</body>

...

 

결과보기

※ Grid 관련 CSS 이용.

 

JS Scrollspy


Scrollspy 플로그인

 

아래 파일 중 하나 필요.

개별: scrollspy.js

통합: bootstrap.js (또는, bootstrap.min.js)

※ 종종 affix.js 플러그인 파일과 함게 사용.

 

 

Scrollspy 방법1 - data-* 속성 이용

 

<!-- The scrollable area -->

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


<!-- 메뉴바 -->

<nav class="navbar navbar-inverse navbar-fixed-top">

...

  <ul class="nav navbar-nav">

    <li><a href="#section1">Section 1</a></li>

    ...

</nav>


<!-- 섹션1 -->

<div id="section1">

  <h1>홈짱닷컴</h1>

  <p>Homzzang.com</p>

</div>

...

 

</body> 

 

 

Scrollspy 방법2 - JS 이용

 

<body>

....

 

<script>

$(document).ready(function(){

    $('body').scrollspy({target: ".navbar", offset: 50});   

});

</script> 

 

 

Scrollspy Option(옵션)

 

offset

스크롤 위치 계산할 때 위에서 오프셋 (= 스크롤 시작점 변경) 할 픽셀수 지정.

옵션값 유형: number   (기본값: 10)

 

 

Scrollspy Method (메서드)

 

.scrollspy("refresh")

scrollspy에서 요소 추가/제거할 때, 문서 새로고침 가능.

 

 

Scrollspy Event (이벤트)

 

activate.bs.scrollspy

scrollspy에 의해 새 항목이 활성화 될 때 발생. 

 


Scrollspy + Amination Scroll (애니스크롤)

 

<script>

$(document).ready(function(){

    $('body').scrollspy({target: ".navbar", offset: 50}); 

    $("#myNavbar a").on('click', function(event) {

        if (this.hash !== "") { // 기본동작 재정의 전, this.hash에 값 있는지 체크.

            event.preventDefault(); // <a> 태그 기본동작 차단.

            var hash = this.hash; // this.hash 값을 hash 변수에 저장.

            $('html, body').animate(
                {scrollTop: $(hash).offset().top} 
                , 800 // 이동 시 800밀리초 소요.
                , function(){window.location.hash = hash;} // 스크롤 완료 후 URL에 hash 추가.
            );

        }  // End if

    }); // End on

});

</script>

 

예제보기


오늘도 즐겁게 열심히 .....

찾아주셔서 감사합니다. Since 2012