"입니다."/> "입니다.">

 >  기사  >  웹 프론트엔드  >  부트스트랩에서 고정 위치를 설정하는 방법

부트스트랩에서 고정 위치를 설정하는 방법

WBOY
WBOY원래의
2022-05-06 15:26:553241검색

부트스트랩에서는 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.