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

[basic] BS3 - Affix (BS어픽스) - 스크롤고정 (= 스크롤상단고정 + 스크롤사이드고정) + Scrollspy(BS스크롤스파이)

 

BS3

 

Affix 플러그인 소개

 

스크롤 시, 특정 위치에 고정시킬 때 사용. 

예: 상단고정메뉴, 사이드고정메뉴, 사이드배너 등

 


 

1.

① 스크롤 위치에 따라 position:static 속성과 position:fixed 속성이 상호전환.

② affix 플러그인은 .affix, .affix-top, .affix-bottom 클래스간 상호 전환.

③ 실제 위치 조정하러면, .affix 클래스에서 position:fixed 속성 제외한 나머지 수정.

 

2.

작동하려면 아래 플러그인 중 하나 필요.

개별: affix.js

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

 

 

 

Affix - 상단메뉴 스크롤고정

 

... 

<style>

.affix {

    top: 0;

    width: 100%;

    z-index: 9999 !important;

}


.affix + .container-fluid {

    padding-top: 70px;

}

</style>

...

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:130px;">

  <h1>홈짱닷컴</h1>

  <h3>Homzzang.com</h3>

</div>


<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">

  <ul class="nav navbar-nav">

    <li class="active"><a href="#">메인</a></li>

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

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

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

  </ul>

</nav>


<div class="container-fluid" style="height:1000px">

  <h1>홈짱닷컴 Homzzang.com</h1>

  ...

</div>

...

 

결과보기

 

 

Affix - 사이드메뉴 스크롤고정

 

... 

<style>

.affix {

    top: 20px;

    z-index: 9999 !important;

}

</style>

...

<div class="container-fluid" style="background-color:#2196F3;color:#fff;height:200px;">

  <h1>홈짱닷컴</h1>

  <h3>Homzzang.com</h3>

  <p>홈페이지 제작관리 + 서버관리</p>

  <p><strong>HTML CSS JS PHP SQL 등</strong></p>

</div>

<br>


<div class="container">

  <div class="row">

    <nav class="col-sm-3">

      <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">

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

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

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

      </ul>

    </nav>

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

      <h1>홈짱닷컴 Homzzang.com</h1>

      ...

    </div>

  </div>

</div>

...

 

결과보기

 

 

Affix 작동원리

 

data-spy="affix"

필수. 부착하려는 요소에 추가.


data-offset-top|bottom

선택. 스크롤 위치를 계산하기 위해 속성을 추가.

 


 

1.

affix 플러그인은 .affix.affix-top.affix-bottom 클래스간 상호전환하며, 각 클래스는 특정 상태 의미.

실제 위치 처리는 position:fixed 속성 제외한 위치 관련 속성 (top 또는 bottom)을 .affix 클래스에 추가.

 

2-1.

플러그인은 .affix-top 또는 .affix-bottom 클래스 추가해 요소가 맨위 또는 맨아래 위치함을 표시.

이 시점에서 CSS 사용한 위치 지정 처리는 불필요.

 

2-2.

affix 설정된 요소 지나서 스크롤하면 실제 affix가 작동시작함. 
플러그인이 .affix-top 또는 .affix-bottom 클래스를 .affix 클래스로 대체. (position:fixed 설정).
affix 요소의 정확한 위치 처리 위한  top 또는 bottom CSS속성 추가 필요.

 

2-3.

하단 offset 정의 시, offset 지나는 스크롤행위 시 .affix 클래스가 .affix-bottom으로 바뀜.
offset은 선택사항이라, 설정하려면 적절한 CSS 설정 필요. (필요시 position:absolute 추가)

 

3.

위의 첫 번째 예에서,
Affix 플러그인은 맨 위에서 197 픽셀을 스크롤했을 때 .affix 클래스 (position : fixed)를 <nav> 요소에 추가. 예제 소스 보면 값이 top:0인 CSS 속성이 .affix 클래스에 추가 된 것을 확인 가능.
이것은 상단에서 197 픽셀을 스크롤했을 때 navbar가 항상 페이지 상단에 위치하도록 위한 것임.

 

 

 

Scrollspy & Affix - 상단메뉴 스크롤고정 (= 원페이지 현재위치 표시 ★)

[핵심코드]

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

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">

...

</nav>

</body>


[전체코드]

 

<!DOCTYPE html>

<html>

<head>

<title>Bootstrap Example</title>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

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

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

<style>

body {

    position: relative; 

}

.affix {

    top:0;

    width: 100%;

    z-index: 9999 !important;

}

.navbar {

    margin-bottom: 0px;

}


.affix ~ .container-fluid {

   position: relative;

   top: 50px;

}

#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">


<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">

  <h1>Scrollspy & Affix 예제</h1>

  <h3>홈짱닷컴 Homzzang.com</h3>

</div>


<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">

  <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="#">Section 4 <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>서버처리</p>

</div>

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

  <h1>SQL</h1>

  <p>DB관리</p>

</div>


</body>

</html>


결과보기

 

 

Scrollspy & Affix - 사이드메뉴 스크롤고정

[핵심코드]

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

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

  <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">  ...

</nav>

...

</body>


[전체코드]

 

<!DOCTYPE html>

 

<html lang="en">

<head>

  <title>Bootstrap Example</title>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">

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

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

  <style>

  body {

    position: relative;

  }

  .affix {

    top: 20px;

    z-index: 9999 !important;

  }

  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="15">


<div class="container-fluid" style="background-color:#2196F3;color:#fff;height:220px;">

  <h1>Scrollspy & Affix 예제</h1>

  <h3>홈짱닷컴 Homzzang.com</h3>

</div>

<br>


<div class="container">

  <div class="row"> 

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

      <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">

        <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>

    </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>서버관리</p>

      </div>      

      <div id="section42">

        <h1>SQL</h1>

        <p>DB관리</p>

      </div>

    </div>

  </div>

</div>


</body>

</html>


결과보기

 

 

 

JS Affix

 

Affix 방법1 : data-* 속성 이용.

[핵심코드]

<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">

 


[전체코드]

위 예제들 참고

 

 

Affix 방법2 : js 이용.

[핵심코드]

$('.nav').affix({offset: {top: 150} });


[전체코드]

...

  <style>

  .affix { top: 20px;}

  </style>

...


<div class="container-fluid" style="background-color:#2196F3;color:#fff;height:100px;">

  <h1>홈짱닷컴 Homzzang.com</h1>

</div>

<br>


<div class="container">

  <div class="row">

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

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

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

        ...

      </ul>

    </nav>

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

      <h1>홈짱닷컴 Homzzang.com</h1>

      ...

    </div>

  </div>

</div>


<script>

$(document).ready(function(){

  $('.nav').affix({offset: {top: 105} }); 

});

</script>

...


결과보기


Affix Option (옵션)

Option 경우, data-* 속성이나 js 통해 전달 가능.
data 속성 방법 경우, data- 뒤에 Option 이름 추가. (예) data-offset=""


 

offset

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

※ 가능한 속성값 타입 종류 : number | object | function 

 

단일 숫자 사용하면 오프셋이 위쪽과 아래쪽 방향 모두에 추가됨.

상단 또는 하단만 제어하려면 {top : 25} 같은 객체 사용.

여러 오프셋의 경우 {top : 25, bottom : 50} 같은 객체 사용.


팁 : 함수 사용해 오프셋을 동적으로 제어 가능. (반응형 디자인에 유용)

 

target

Affix할 대상 요소 지정. (기본값: window 객체)

※ 가능한 속성값 타입 종류: selector | node | element 

 

 

 

Affix Event (이벤트)

 

affix.bs.affix

고정 위치가 요소에 추가되기 전에 발생.

(예 : .affix-top 클래스가 .affix 클래스로 대체되려할 때 발생).

 

affixed.bs.affix

요소에 고정 된 위치가 추가 된 후 발생.

(예 : .affix-top 클래스가 .affix 클래스로 대체된 후 발생)

 

affix-top.bs.affix

상단 요소가 원래 (고정되지 않은) 위치로 돌아 오기 전에 발생. 

(예 : .affix 클래스가 .affix-top으로 대체되려할 때 발생.)

 

affixed-top.bs.affix

상단 요소가 원래 (고정되지 않은) 위치로 돌아온 후 발생.

(예 : .affix 클래스가 .affix-top으로 대체된 후 발생.)

 

affix-bottom.bs.affix

하단 요소가 원래 (고정되지 않은) 위치로 돌아 오기 전에 발생.

(예 : .affix 클래스가 .affix-bottom으로 대체되려할 때 발생).

 

affixed-bottom.bs.affix

맨 아래 요소가 원래 (고정되지 않은) 위치로 돌아온 후 발생.

(예 : .affix 클래스가 .affix-bottom으로 대체된 후 발생.)

 

 

 

Affix + Animation (애니효과 = 메뉴높이 변화 효과)

 

...

<style>

.affix {

    top: 0;

    width: 100%;

    -webkit-transition: all .5s ease-in-out;

    transition: all .5s ease-in-out;

    background-color: #F44336;

    border-color: #F44336;


}

.affix a {

    color: #fff !important;

    padding: 15px !important;

    -webkit-transition: all .5s ease-in-out;

    transition: all .5s ease-in-out;

}

.affix-top a {

    padding: 25px !important;

}

.affix + .container-fluid {

    padding-top: 95px;

}

</style>

...


<div class="container-fluid" style="background-color:#F44336;color:#fff;height:100px;">

  <h1>홈짱닷컴 Homzzang.com</h1>

</div>


<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="97">

  <ul class="nav navbar-nav">

    <li><a href="#">Basic Topnav</a></li>

     ...

  </ul>

</nav>


<div class="container-fluid" style="height:1000px">

  <h1>홈짱닷컴 Homzzang.com</h1>

  ...

</div>

...


결과보기

 

 

Affix + Slide (슬리이드효과 = 고정메뉴 슬라이드다운 효과)

 

...

<style>

.affix {

    top: 0;

    width: 100%;

    -webkit-transition: all .5s ease-in-out;

    transition: all .5s ease-in-out;

}

.affix-top {

    position: static;

    top: -35px;

}

.affix + .container-fluid {

    padding-top: 70px;

}

</style>

...

<div class="container-fluid" style="background-color:#F44336;color:#fff;height:100px;">

  <h1>홈짱닷컴 Homzzang.com</h1>

</div>


<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="97">

  <ul class="nav navbar-nav">

    <li class="active"><a href="#">Basic Topnav</a></li>

    ...

  </ul>

</nav>


<div class="container-fluid" style="height:1000px">

  <h1>홈짱닷컴 Homzzang.com</h1>

  ...

</div>

...


결과보기


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

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