최신 웹 개발 튜토리얼
 

Bootstrap JS 부착

❮ 이전 다음 참조 ❯

JS 부착 (affix.js)

첨자 플러그인 요소가 페이지 영역에 부착 (고정) 될 수 있습니다. 이것은 종종 그들을 위로 스크롤하는 동안 특정 영역에 "스틱"및 페이지 아래로 만들기 위해, 탐색 메뉴 또는 사회 아이콘 버튼으로 사용됩니다.

플러그인은 온 오프이 동작을 전환 스크롤 위치에 따라, (고정 된 정적에서 CSS 위치의 값을 변경).

: 세 개의 클래스 사이에 토글 플러그인 접사 .affix , .affix-top 및 .affix-bottom . 각 클래스는 특정 상태를 나타냅니다. 당신을 제외하고 실제 위치를 처리하기 위해 CSS 속성을 추가해야합니다 position:fixed 온 .affix 클래스입니다.

자세한 내용은 우리의 읽기 Bootstrap 부착 자습서 .

팁 : 부착 플러그인은 종종 함께 사용 Scrollspy의 플러그인.

통해 data-* 속성

추가 data-spy="affix" 당신이 감시 할 요소 및 data-offset-top|bottom=" number " 속성은 스크롤의 위치를 계산합니다.

예

<ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
»그것을 자신을 시도

자바 스크립트를 통해

수동으로 사용 :

예

$('.nav').affix({offset: {top: 150} });
»그것을 자신을 시도

옵션을 부착

옵션 데이터 속성이나 자바 스크립트를 통해 전달 될 수 있습니다. 데이터 속성의 경우에서와 같이, 데이터 -에 옵션 이름을 추가 = ""데이터의 오프셋 (offset)입니다.

이름 유형 태만 기술
offsetnumber | object | function10 스크롤의 위치를 ​​계산할 때 화면에서 오프셋 픽셀 수를 지정합니다. 하나의 번호를 사용하는 경우, 모두 상하 방향에 오프셋. 당신은 상단 또는 하단을 제어하려는 경우와 같은 개체를 사용하여 offset: {top:25}

여러 오프셋을 사용 offset: {top:25, bottom:50}

팁 : 동적으로 제공하는 기능을 사용하여 오프셋 (응답 설계에 유용 할 수 있습니다)
targetselector | node | elementthe window object 첨자의 대상 요소를 지정합니다

이벤트를 부착

다음 표는 사용 가능한 모든 접사 이벤트를 나열합니다.

행사 기술 시도 해봐
affix.bs.affix 고정 된 위치가 요소에 추가되기 전에 발생합니다 (예를 들어, 때 .affix-top 클래스로 대체 할 약 .affix 클래스) 시도 해봐
affixed.bs.affix 고정 된 위치가 요소에 추가 된 후에 발생합니다 (예를 들어, 후 .affix-top 클래스가 대체됩니다 .affix 클래스) 시도 해봐
affix-top.bs.affix 상위 요소가 원래 (비 고정) 위치로 반환하기 전에 발생합니다 (예는 .affix 클래스로 대체하려 할 .affix-top ) 시도 해봐
affixed-top.bs.affix 상위 요소가 원래 (비 고정) 위치로 반환 한 후 (예를 들어, 발생 .affix 클래스로 대체되었습니다 .affix-top ) 시도 해봐
affix-bottom.bs.affix 하단 요소가 원래 (비 고정) 위치로 반환하기 전에 발생합니다 (예는 .affix 클래스로 대체하려 할 .affix-bottom ) 시도 해봐
affixed-bottom.bs.affix 바닥 요소 (예를 들어, 원래 (비 고정) 위치로 복귀 후 발생 .affix 클래스로 대체되었습니다 .affix-bottom ) 시도 해봐
예

예

부착 된 네비게이션 바

수평 부착 탐색 메뉴 만들기 :

예

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
»그것을 자신을 시도

jQuery를 사용하면 자동으로 네비게이션 바 부착하기

jQuery의 사용 outerHeight() 사용자가 지정된 요소 통과 스크롤 한 후 네비게이션 바에 부착하는 방법 (<header>) :

예

$(".navbar").affix({offset: {top: $("header").outerHeight(true)} });
»그것을 자신을 시도

Scrollspy 및 부착

와 함께 플러그인 부착 사용 Scrollspy의 플러그인 :

수평 메뉴 (Navbar의)

<body data-spy="scroll" data-target=".navbar" data-offset="50">

<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
...
</nav>

</body>
»그것을 자신을 시도

수직 메뉴 (Sidenav)

<body data-spy="scroll" data-target="#myScrollspy" data-offset="15">

<nav class="col-sm-3" id="myScrollspy">
  <ul class="nav nav-pills nav-stacked" data-spy="affix" data-offset-top="205">
  ...
</nav>

</body>
»그것을 자신을 시도

접사에 애니메이션 네비게이션 바

다른 조작하기 위해 CSS를 사용 .affix 클래스를 :

예 - 배경색 변경 및 스크롤에 네비게이션 바의 패딩

.affix {
    top: 0;
    width: 100%;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    background-color: #F44336;
    border-color: #F44336;
}

.affix a {
    color: #fff !important;
    padding: 15px !important;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.affix-top a {
    padding: 25px !important;
}
»그것을 자신을 시도

예 - 네비게이션 바에있는 슬라이드

.affix {
    top: 0;
    width: 100%;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
}

.affix-top {
    position: static;
    top: -35px;
}
»그것을 자신을 시도

❮ 이전 다음 참조 ❯