affix는 Bootstrap에서 유용한 컨트롤로 브라우저의 스크롤 바의 위치를 모니터링하고 항상 페이지의 가시 영역에서 탐색을 유지할 수 있습니다. 처음에 내비게이션은 페이지의 일반 스트리밍 레이아웃으로 문서의 고정 위치를 차지했습니다. 페이지가 스크롤되면 탐색은 항상 사용자의 시청 영역에서 고정 레이아웃 (고정)이되었습니다. 사용법에 대해 이야기합시다. 먼저 구현 원칙을 살펴 보겠습니다. 페이지 요소의 클래스 속성을 실시간으로 수정하여 달성됩니다.
처음에는 AFFXI-TOP 속성이 부착을 적용하는 요소 클래스에 자동으로 추가됩니다.
내비게이션이 페이지 상단에 도달하려면 스크롤 바 스크롤이 있으면 어타기 탑이 요소 클래스에서 부착되도록 변경됩니다.
스크롤 바를 페이지 하단으로 드래그 할 때는 affix가 자동으로 affix-bottom으로 변경됩니다.
위의 프로세스는 제어 자체에 의해 완전히 구현되며 개입 할 필요가 없습니다. 우리는이 주에서 CSS를 작성하면됩니다.
우리가 설정할 수 있다면
.affix-top {top : 150px;}.그것이 어떻게 사용되는지 살펴 보겠습니다
1. 데이터 속성을 전달하십시오
당신은 당신이 듣는 데 필요한 페이지 요소에 data-spy = "affix"를 추가하면됩니다. 그런 다음 오프셋을 사용하여 요소의 온 및 오프를 결정하십시오.
<ul data-spy = "affix"data-offset-top = "190"> <li> <a href = "#one"> 튜토리얼 </a> <li> <a href = "#t
여기서 Data-Offset-Top은 페이지 상단에서 접미사 상태 요소가있는 위치입니다. 페이지 상단으로 스크롤 할 때 ".affix"스타일을 설정하여 "상단"값을 재설정 할 수 있습니다.
2. JavaScript를 통한 호출
샘플 코드는 다음과 같습니다.
$ ( '#mynav'). affix ({orpset : {top : 100, // 스크롤링의 페이지 상단의 위치는 바닥입니다 : function () {// 스크롤이 완료된 경우 페이지 하단의 위치 (this.bottom = $ ( '. bs-footer')).)HTML 코드는 다음과 같습니다 (핵심 코드 만 표시됨) :
<ul id = "mynav"> <li> <a href = "#one"> 튜토리얼 One </a> </li> <li> <a href = "#two"> Tutorial Two </a> </li> <li> <a href = "#Three"> TUPORION THER </a> </li> </div> </div>
위의 내용은 부트 스트랩에서 부착 사용을 도입 한 것으로 보이지만 실제 사용 프로세스에서 스크롤 바를 드래그 할 때 affix를 사용하는 페이지 요소의 너비가 변경되어 지저분한 페이지 레이아웃이 나타납니다. 따라서 다음과 같은 부착을 정의하는 CSS에서 폭을 기록하는 것이 가장 좋습니다.
.affix {너비 : 250px;}이런 식으로, 창이 충분히 커지면 문제가 없지만 창의 크기를 끌고 변경하면 레이아웃이 다시 엉망이된다는 것을 알 수 있습니다. 이 문제는 오랫동안 나를 괴롭 혔습니다. 마지막으로, BootCSS의 소스 코드를 분석함으로써 웹 사이트가 첨부 된 요소를 사용하는 모든 클래스에 "Hidden-Print", "Hidden-XS", "Hidden-SM"속성을 추가 한 것으로 나타났습니다. 화면이 요구 사항을 충족하지 않으면 부착을 숨기는 데 사용됩니다. 사용 편의성에 영향을 미치지 만, 어떤 경우에도 레이아웃이 깔끔하게 보장합니다.
위의 내용은 부트 스트랩에서 접미사 컨트롤 사용과 아름다운 레이아웃을 유지하는 방법에 대한 자세한 설명입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!