1. 전환 (필터)
기본 지원 구성 요소는 다른 구성 요소에 의해 여러 번 참조됩니다. 브라우저에 따라 전환을 지원할 수있는 기능을 구현 한 다음 애니메이션의 최종 이벤트를 바인딩하십시오.
첫째 : 요소를 만듭니다.
그런 다음 :이 요소에서 지원하는 전환 애니메이션 이름의 개요
전환 구현 기술은 주로 jQuery의 이벤트 객체를 다시 작성하는 것이며 코드는 다음과 같습니다.
$ (function () {$ .Support.Transition = TransitionEnd () if (! $. support.Transition) return $ .event.special.bstransitionEnd = {bindtype : $ .support.transition.end, delegateType : $ .support.transition.end, hands : honter : return (e. e.handleobj.handler.apply (this, arguments)}}})2. 부착 (자동 부동 위치)
1. 대상 : 매개 변수는 위치를 나타내는 참조 노드를 나타냅니다 (스크롤 막대를 생성하는 상위 컨테이너 객체이어야합니다). 기본값은 창입니다.
2. 데이터 오프셋에 의해 설정된 상단 및 하단 값은 표현식을 계산하는 데만 사용되며 CSS로 설정되지 않습니다.
3. 세 가지 유형의 포지셔닝 스타일 :
3.1. affix-top : 페이지 상단에 도달 할 때 추가 될 스타일
3.2. affix : 페이지 중간에 추가 될 스타일
3.3. affix-bottom : 페이지 하단에 추가 될 스타일
4. 처리 공식 :
4.1. 상단 : 트라이트의 스크롤 바 높이 (ScrollTop) <요소의 상단 위치 (OffsetTop) (첫 번째 판단)
4.1.1. ScrollTop은 다음과 같이 설정됩니다 : 요소 자체에 의해 위치 된 상단 (요소의 원래 지점으로부터의 거리는 현재 문서에서 위치) (처음이 아님)
4.2. getPinnedOffset : 요소 상단 대상 스크롤 바를 고수하는 상단을 얻습니다.
4.3. 하단 : 고정 요소가 처음으로 배치 된 경우 바닥은 대상 스크롤 바 높이 + 대상 요소 높이> = 전체 문서의 높이 스크롤 바 높이가 하단에서 요소에 붙어 있습니다.
4.3.1. 처음이 아닌 경우 바닥 위치
1) OffsetTop (요소의 상단 위치로부터의 거리)이 비어 있지 않으면 대상의 상단 + getPinnedOffset의 값> 현재 상단에 배치 된 스티커 요소의 값
2) 오프셋 탑이 비어 있으면 대상의 상단 + 대상 요소의 높이> 문서 높이의 높이가 하단에 붙어 있습니다.
4. 고정 요소를 변경할 수있는 유일한 상단은 다음과 같습니다. 문서 높이 - 고정 요소의 높이 - 하단에서 고정 요소의 높이
5. 구덩이가있는 곳 :
1) 상단과 하단이 함께 사용되면 충돌이 발생합니다.
Attlix-Bottom, 즉 페이지 하단에 도달 할 때 Bootstrap은 오프셋을 사용하여 최상위 값을 설정하고 위치를 추가합니다. 요소에 상대 값이 추가되며, 이는 페이지 상단으로 돌아온 후 다시 스크롤 할 때 다시 아래로 내려갈 때 효과가 없습니다.
이유 : 상대적인 인라인 스타일 세트는 클래스에 설정된 고정 스타일을 무시합니다.
6. 요약
1) 최상위 상황에서는 좋으며 바닥 상황에서 수동 제어를 추가해야합니다.
2) 부착 제어를 적용 할 때는 적어도 부전 스타일을 다시 작성하여 스티커 바의 위치를 제어하십시오.
여전히 심도있게 공부하고 싶다면 여기를 클릭하여 멋진 주제를 배우고 첨부 할 수 있습니다. 부트 스트랩 학습 자습서
이 일련의 튜토리얼은 다음과 같이 컴파일되었습니다. Bootstrap Basic Tutorials 특별 주제, Click to Learn에 오신 것을 환영합니다.
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.