부트스트랩 접미사 플러그인(고급)

접미사 플러그인

Affix 플러그인을 사용하면 요소가 페이지의 영역에 고정(잠금)될 수 있습니다. 이것은 탐색 메뉴 또는 소셜 아이콘 버튼과 함께 자주 사용되어 페이지를 위아래로 스크롤하는 동안 특정 영역에 "고정"되도록 합니다.

플러그인 은 스크롤 위치에 따라 이 동작을 켜고 끕니다(값을 CSS position에서 static로 변경).fixed

예 1) 부착된 탐색 모음:

예 2) 첨부된 사이드바:

접미사를 사용하면 페이지를 위아래로 스크롤할 때 메뉴가 항상 표시되고 해당 위치에 잠겨 있습니다.

부착된 탐색 메뉴를 만드는 방법

다음 예는 가로로 고정된 탐색 메뉴를 만드는 방법을 보여줍니다.

다음 예에서는 세로로 고정된 탐색 메뉴를 만드는 방법을 보여줍니다.

예시 설명

data-spy="affix"부착하려는 요소에 추가 합니다.

선택적으로 data-offset-top|bottom속성을 추가하여 스크롤 위치를 계산합니다.

작동 원리

접미사 플러그인은 .affix, .affix-top, 및 .affix-bottom. 각 클래스는 특정 상태를 나타냅니다. position:fixed 클래스를 제외 하고 실제 위치를 처리하려면 CSS 속성을 추가해야 합니다 .affix.

• 플러그인 은 요소가 최상위 또는 최하위 위치에 있음을 나타내기 위해 .affix-top또는 클래스를 추가합니다. .affix-bottom이 시점에서 CSS를 사용한 위치 지정은 필요하지 않습니다.


• 부착된 요소를 지나 스크롤하면 실제 부착이 트리거됩니다. 여기에서 플러그인이 .affix-top또는 .affix-bottom클래스를 .affix클래스(sets position:fixed)로 대체합니다. 이 시점에서 페이지에 부착된 요소의 위치를 ​​지정하기 위해 CSS top또는 bottom속성을 추가해야 합니다.


• 하단 오프셋이 정의된 경우 이를 지나 스크롤하면 .affix클래스가 로 바뀝니다 .affix-bottom. 오프셋은 선택 사항이므로 오프셋을 설정하려면 적절한 CSS를 설정해야 합니다. 이 경우 position:absolute필요할 때 추가합니다.

위의 첫 번째 예에서 Affix 플러그인 .affix은 상단에서 197픽셀 스크롤했을 때 <nav> 요소에 클래스(position:fixed)를 추가합니다. 예제를 열면 top값이 0인 CSS 속성을 .affix클래스에 추가한 것도 알 수 있습니다. 이것은 상단에서 197픽셀 스크롤했을 때 탐색 모음이 항상 페이지 상단에 유지되도록 하기 위한 것입니다.

Scrollspy 및 접미사

Scrollspy 플러그인 과 함께 Affix 플러그인 사용:

전체 부트스트랩 접미사 참조

모든 접미사 메서드 및 이벤트에 대한 전체 참조를 보려면 Bootstrap JS 접미사 참조로 이동하십시오 .