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: 20 px;}
</style>
...
<div class="container-fluid" style="background-color:#2196F3;color:#fff;height:100 px; ">
<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>
...
결과보기
주소 복사
랜덤 이동