부트스트랩에서 고정 위치를 설정하는 방법
- WBOY원래의
- 2022-05-06 15:26:553260검색
부트스트랩에서는 Affix 플러그인을 사용하여 고정 위치를 설정할 수 있습니다. 플러그인은 사용자 정의 속성 데이터를 통해 모든 요소의 위치를 수정할 수 있습니다. 구문은 "4c21964ac1401d8ca7579aca91772d2f".
이 튜토리얼의 운영 환경: Windows 10 시스템, 부트스트랩 버전 3.3.7, DELL G3 컴퓨터
부트스트랩에서 고정 위치 설정 방법
고정 위치--선언적 트리거 고정 위치 지정
부록 플러그인은 모든 요소에서 사용할 수 있습니다. 고정 위치 지정의 경우 더 간단한 방법은 사용자 정의 속성 데이터를 통해 이를 트리거하는 것입니다. 여기에는 주로 두 가지 매개변수가 포함됩니다:
1. data-spy: 요소가 고정되었음을 나타내는 값 접사.
2. data-offset: 90과 같은 정수 값은 위쪽 및 아래쪽 요소의 값이 모두 90px임을 의미합니다. data-offset-top 및 data-offset-bottom이라는 두 가지 방법이 포함됩니다. .
data-offset-top은 상단에서 요소의 거리를 설정하는 데 사용됩니다. 예를 들어 90은 요소가 위에서 90px 떨어져 있음을 의미합니다. 사용자가 위에서 스크롤 막대를 아래로 끌 때 스크롤 거리가 90px보다 크면 접사 요소가 더 이상 스크롤되지 않고 상단에 고정됩니다. 브라우저 창.
data-offset-bottom은 data-offset-top과 정반대입니다.
구체적인 사용법은 다음과 같습니다.
<div data-spy="affix" data-offset="90">affix元素</div>
데이터 오프셋 값 방식을 별도로 설정합니다.
<div data-spy="affix" data-offset-top="90" data-offset-bottom="150">affix元素</div>
스크롤 모니터링은 본문에 선언해야 합니다.
<body data-spy="scroll" data-target="sidebarMenu">
참고로 효과는 와이드스크린 모드에서 보시기 바랍니다. 내 테스트에 따르면 선언적 스타일을 사용하면 data-offset-top 값이 설정되어 있어도 유효하지 않습니다. 스타일에서 affix의 상위 값을 data-offset 값과 동일하게 설정해야 합니다. -맨 위. 데이터 오프셋 하단과 동일합니다.
관련 권장 사항: 부트스트랩 튜토리얼
위 내용은 부트스트랩에서 고정 위치를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!