부트스트랩 JS 접미사
JS 접미사(affix.js)
Affix 플러그인을 사용하면 요소가 페이지의 영역에 고정(잠금)될 수 있습니다. 이것은 탐색 메뉴 또는 소셜 아이콘 버튼과 함께 자주 사용되어 페이지를 위아래로 스크롤하는 동안 특정 영역에 "고정"되도록 합니다.
플러그인은 스크롤 위치에 따라 이 동작을 켜고 끕니다(CSS 위치 값을 정적에서 고정으로 변경).
접미사 플러그인은 .affix, .affix-top, 및
.affix-bottom. 각 클래스는 특정 상태를 나타냅니다. position:fixed
클래스를 제외 하고 실제 위치를 처리하려면 CSS 속성을 추가해야 합니다 .affix.
자세한 내용은 부트스트랩 접미사 자습서 를 참조하십시오 .
팁: Affix 플러그인은 종종 Scrollspy 플러그인 과 함께 사용됩니다 .
데이터-* 속성을 통해
data-spy="affix"감시하려는 요소에 추가
하고 스크롤 위치를 계산하는 속성을 추가합니다.data-offset-top|bottom="number"
예시
<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
자바스크립트를 통해
다음을 사용하여 수동으로 활성화:
예시
$('.nav').affix({offset: {top: 150} });
접미사 옵션
옵션은 데이터 속성 또는 JavaScript를 통해 전달할 수 있습니다. 데이터 속성의 경우 data-offset=""에서와 같이 옵션 이름을 data-에 추가합니다.
| Name | Type | Default | Description |
|---|---|---|---|
| offset | number | object | function | 10 |
Specifies the number of pixels to offset from screen when calculating position of scroll. When using a single number, the offset is added to both top and bottom directions. If you only want to control the top or the bottom, use an object, like offset: {top:25}For multiple offsets, use offset: {top:25, bottom:50}Tip: Use a function to dynamically provide an offset (can be useful for responsive designs) |
| target | selector | node | element | the window object | Specifies the target element of the affix |
접미사 이벤트
다음 표에는 사용 가능한 모든 접미사 이벤트가 나열되어 있습니다.
| Event | Description | Try it |
|---|---|---|
| affix.bs.affix | Occurs before fixed positioning is added to the element (e.g, when the .affix-top class is about to be replaced with the .affix class) |
|
| affixed.bs.affix | Occurs after fixed positioning is added to the element (e.g., after the .affix-top class is replaced with the .affix class) |
|
| affix-top.bs.affix | Occurs before the top element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-top) |
|
| affixed-top.bs.affix | Occurs after the top element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-top) |
|
| affix-bottom.bs.affix | Occurs before the bottom element returns to its original (non-fixed) position (e.g., the .affix class is about to be replaced with .affix-bottom) |
|
| affixed-bottom.bs.affix | Occurs after the bottom element returns to its original (non-fixed) position (e.g., the .affix class has been replaced with .affix-bottom) |
더 많은 예
부착된 탐색바
가로로 고정된 탐색 메뉴 만들기:
예시
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
jQuery를 사용하여 자동으로 탐색 모음 추가
jQuery의 outerHeight() 메서드를 사용하여 사용자가 지정된 요소(<header>)를 스크롤한 후 탐색 모음을 고정합니다.
예시
$(".navbar").affix({offset: {top: $("header").outerHeight(true)}
});
Scrollspy 및 접미사
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>
세로 메뉴(Sidenav)
<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>
접미사에 애니메이션 탐색 모음
CSS를 사용하여 다른 .affix 클래스를 조작합니다.
예 - 스크롤 시 탐색 모음의 배경색 및 패딩 변경
.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 {
top: 0;
width: 100%;
-webkit-transition: all .5s ease-in-out;
transition: all .5s ease-in-out;
}
.affix-top {
position: static;
top: -35px;
}