Bootstrap Affix Plugin (Advanced)

첨자 플러그인

첨자 플러그인 요소가 페이지 영역에 부착 (고정) 될 수 있습니다. 이것은 종종들을 수 있도록, 탐색 메뉴 또는 사회 아이콘 버튼으로 사용된다 "stick" 까지 스크롤하는 동안 특정 영역에 해당 페이지 아래로.

플러그인은 온 오프이 동작을 전환 스크롤 위치에 따라, (고정 된 정적에서 CSS 위치의 값을 변경).

예 1) 부착 된 네비게이션 바 :

예 2) 부착 사이드 바 :

우리가 스크롤 페이지 아래로 부착, 함께, 메뉴가 항상 표시하고 그 위치에 고정합니다.

어떻게 부착 탐색 메뉴 만들기

다음은 수평 부착 탐색 메뉴를 만드는 방법을 보여줍니다 :

다음의 예는 수직 부착 탐색 메뉴를 만드는 방법을 보여줍니다 :

예 설명

추가 data-spy="affix" 당신이 부착 할 요소에.

선택적으로, 추가 data-offset-top|bottom 스크롤의 위치를 계산하는 속성을.

작동 원리

: 세 개의 클래스 사이에 토글 플러그인 접사 .affix , .affix-top 및 .affix-bottom . 각 클래스는 특정 상태를 나타냅니다. 당신을 제외하고 실제 위치를 처리하기 위해 CSS 속성을 추가해야합니다 position:fixed 온 .affix 클래스입니다.

• 플러그인은 추가 .affix-top 또는 .affix-bottom 요소가에 표시하기 위해 클래스의 맨 위 또는 맨 아래 가장 위치입니다. CSS와 위치는이 시점에서 필요하지 않습니다.


• 별첨 된 요소를지나 스크롤하면 실제 부착을 트리거 - 플러그인이 대체 곳입니다 .affix-top 또는 .affix-bottom 와 클래스 .affix 클래스 (세트 position:fixed ). 이 시점에서, 당신은 CSS를 추가해야합니다 top 또는 bottom 페이지에 부착 된 요소를 배치하는 속성입니다.


• 오프셋 바닥이 정의 된 경우, 과거 스크롤하면 대체 .affix 와 클래스 .affix-bottom . 오프셋 (offset)는 선택 사항이기 때문에, 하나를 설정하면 해당 CSS를 설정해야합니다. 이 경우, 추가 position:absolute 필요한 경우.

위의 첫 번째 예에서, 부착 플러그인은 추가 .affix 받는 사람 : 클래스 (고정 된 위치) <nav> 우리가 정상에서 197 픽셀을 스크롤 할 때 요소를. 당신은 예를 열 경우, 당신은 또한 우리가 CSS 추가 된 것을 볼 수 있습니다 top 받는 0의 값을 가진 속성을 .affix 클래스입니다. 이것은 우리가 정상에서 197 픽셀을 스크롤 할 때 네비게이션 바에는, 모든 시간에 페이지의 상단에 남아 있는지 확인하는 것입니다.

Scrollspy 및 부착

와 함께 플러그인 부착 사용 Scrollspy의 플러그인 :

완료 Bootstrap 부착 참조

모두의 전체 참조 방법과 이벤트를 부착의 경우, 우리로 이동 Bootstrap JS 부착 참조 .