Latest web development tutorials

추가 탐색 (부착) 위젯 부트 스트랩

추가 탐색 (부착) 플러그인 할 수있는 <DIV> 페이지의 특정 위치에 고정. 또한 켜거나 플러그 사이에 스위치를 사용하여 해제 할 수 있습니다. 일반적인 예는 소셜 아이콘이다. 그들은 특정 위치에서 시작하지만, 때 태그의 페이지를 클릭 <DIV>이 아닌 페이지 스크롤의 나머지 부분과, 위치에 잠 깁니다.

당신은 각각의 플러그인 기능을 참조하려면affix.js를 참조 할 필요가있다.또는, 부트 스트랩 플러그인 개요 장에서는 언급, 당신은bootstrap.js또는bootstrap.min.js의압축 된 버전을 참조 할 수있습니다.

용법

당신은 속성 데이터, 또는 (부착) 플러그인을 탐색하기 위해 추가 자바 스크립트를 사용하여 할 수 있습니다.

  • 데이터 속성을 통해 : 탐색 (부착) 동작에 추가 요소를 추가하기 만하면 데이터 스파이 =을모니터링 할 요소를 추가해야합니다"부착"가될 수 있습니다. 잠금 요소를 정의하는 오프셋 때 모바일로 전환하는 데 사용합니다.

    예

    다음 예는 데이터에 의해 추가 탐색 (접사) 위젯의 사용 용도 속성을 보여줍니다

    예

    <! DOCTYPE HTML> <HTML> <헤드> <메타 캐릭터 = "UTF-8"> <제목> 추가 탐색을 부트 스트랩 (부착) 위젯 </ 제목> <링크 REL은 = "스타일" HREF = "http://cdn.static.w3big.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <스크립트 SRC = "http://cdn.static.w3big.com/libs/jquery/2.1.1/jquery.min.js"> </ script> <스크립트 SRC = "http://cdn.static.w3big.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"> </ script> <스타일>
    / * 사용자 정의 스타일 * / UL의 .nav-탭 { 폭 : 140 픽셀 ; 여백 - 가기 : 20 픽셀 ; 국경 반경 : 4 픽셀 ; 테두리 : 1 픽셀 고체 #ddd ; 상자 그림자 : 0 1 픽셀 4 픽셀 RGBA (0, 0, 0, 0.067) ;} UL .nav-탭 리 { 마진 : 0 ; 국경 정상 : 1 픽셀 고체 #ddd ;} UL .nav-탭 리 : 첫 아이 { 국경 가기 : 없음 ;} UL .nav-탭 리 { 마진 : 0 ; 패딩 : 8 픽셀 16 픽셀 ; 국경 반경 : 0 ;} UL .nav-탭 리 .active는 A, UL .nav-탭 리 .active는 A : 가져가 { 색상 : #fff ; 배경 : # 0088cc ; 테두리 : 1 픽셀 고체 # 0088cc ;} UL .nav-탭 리 : 첫 아이 { 국경 반경 : 4 픽셀 4 픽셀 0 0 ;} UL .nav-탭 리 : 마지막 아이 { 국경 반경 : 0 0 4 픽셀 4 픽셀 ;} UL .nav-탭 .affix { 최고 : 30 픽셀 / *의 상단 위치 설정 고정 요소 * / }
    </ 스타일> </ 헤드> <바디 데이터 스파이 = "스크롤" 데이터 대상 = "#myScrollspy"> <사업부 클래스 = "컨테이너"> <사업부 클래스 = "대형 기기"> <H1> 부트 스트랩 부착 </ H1 > </ DIV> <사업부 클래스 = "행"> <사업부 클래스 = "COL-XS-3 " ID = "myScrollspy"> <UL 클래스 = "탐색 탐색 - 탭 탐색 -stacked" 데이터 스파이 = "부착" 데이터 오프셋 가기 = "125 "> <리 클래스> <A = "활성" HREF = "# 섹션-1" > 첫 번째 부분 </ A> </ 리> <LI> <A HREF = "# 섹션-2" > 두 번째 부분 </ A> </ 리> <LI> <A HREF = "# 섹션-3" > 파트 III </ A> </ 리> <LI> <A HREF = "# 섹션-4" > 파트 IV </ A> </ 리> <LI> <A HREF = "# 섹션-5" > 파트 V </ A> </ 리> </ UL> </ DIV> <사업부 클래스 = "COL-XS-9 "> <H2 ID = "섹션-1"> 첫 번째 부분 </ H2> <P> LOREM의 ipsum의 슬픔이 AMET 앉아 consectetur의 adipiscing의 ELIT가. 남 유럽 연합 (EU) SEM tempor,에서 varius의 quam는 음주 운전을 luctus. Mauris 마그나 metus는 NEC의 turpis의 VEL, 언제나 malesuada 분담금. 도박 아이디 metus 교류 nisl BIBENDUM scelerisque 비 비 푸 루스. Suspendisse을 dapibus varius nibh 비 aliquet sagittis. tincidunt의에 orci 도박 elementum을 AMET 앉아. Vivamus fermentum을 arcu에 aliquam에. Quisque aliquam 간이 ODIO에 fringilla. Vivamus BIBENDUM 유럽 연합 (EU)에서 nisl 레오, blandit, tristique eget의 risus. 정수 aliquet quam 유타 ELIT suscipit, 아이디 interdum을 neque porttitor. 정수 faucibus ligula. < / P> <P> 도박은 quam의 유타 마그나의 quis consequat의 faucibus합니다. Pellentesque eget에 NiSi 마일 suscipit의 tincidunt. UT 템퍼의 의견을 risus합니다. Pellentesque viverra sagittis quam mattis에서. Suspendisse의 potenti을. Aliquam이 lacus의 blandit에서 facilisis gravida ODIO. Phasellus의 auctor의 velit을 gravida의 nibh을 AMET 앉아 , commodo iaculis 그래서 우린 viverra. Etiam 이력서 추정 arcu. Mauris VEL congue 슬픔. aliquam eget 마일 마일. Fusce의 quam의 tortor, commodo 교류 음주 운전 quis, BIBENDUM viverra erat. 마에 케 나스 mattis lectus enim, quis tincidunt 음주 운전 molestie euismod. Curabitur 등 DIAM tristique, accumsan NUNC 유럽 연합 (EU), hendrerit의 TELLUS. < / P> <HR> <H2 ID = "섹션-2"> 두 번째 섹션 </ H2> <P> Nullam hendrerit 그래서 우린 비 레오 aliquet imperdiet. Etiam에서 sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci.에서 dapibus velit blandit pharetra tincidunt. Quisque 비 사피엔스 NEC의 lacus condimentum의 facilisis의 유타 iaculis enim. Sed의 viverra interdum BIBENDUM. Donec 교류 sollicitudin의 슬픔. fringilla 이력서의 lacus 나오지 rutrum에서. Phasellus congue의 도박의 ligula 나오지 consequat. </ P> <P> 도박은 lacus, scelerisque consectetur 교류 fermentum의가 lorem convallis가 나오지도. 남 ODIO의 tortor, 의견 quis malesuada pellentesque 이력서의 orci,시. Vivamus elementum를, 유럽 연합 (EU)의 auctor의 lobortis, DIAM velit egestas lacus을 고양이 속 urna quis 분담금 metus fermentum을 quis. Sed의 facilisis에서 리베로. 정액 sociis natoque penatibus 등 magnis 창피 출산 몬테 클라, nascetur ridiculus의 뮤스. 도박 BIBENDUM blandit 슬픔. 눈크의 orci의 슬픔에 molestie 선관위 nibh, hendrerit의 tincidunt 분담금. Vivamus SEM augue, hendrerit 비 사피엔스에서, 몰리스 ornare augue. </ P > <HR> <H2 ID = "섹션-3"> 파트 III </ H2> <P> 정수 pulvinar 레오 아이디 risus의 pellentesque 도박. Sed의의 DIAM의 리베로는 sodales eget 사피엔스 VEL, porttitor BIBENDUM enim. Donec는 NEC의 분담금에 nibh 이력서의가 lorem porttitor의 blandit을 나오지. Pellentesque 이력서의 metus의 ipsum의. Phasellus는 NUNC 교류 현미경 malesuada의 condimentum을 나오지. Etiam을에 aliquam lectus. 남 VEL 사피엔스의 DIAM. Donec pharetra 아이디 arcu의 eget의 blandit. Proin imperdiet mattis augue porttitor있다. Quisque 템퍼 enim 아이디 lobortis의 feugiat. 푸 루스의 된 Lacinia의 porttitor에서 Suspendisse tincidunt risus quis 슬픔 fringilla blandit. UT 나오지 사피엔스. Nullam가, 고양이 속 iaculis pretium의 ornare, 슬픔의 nisl의 언제나의 tortor, VEL sagittis lacus 추정 consequat 에로스. Sed의 아이디 pretium의 nisl. Curabitur의 슬픔의 nisl, laoreet 이력서의 aliquam 아이디, tincidunt는 AMET 앉아 mauris. </ P> <P> Phasellus 이력서의 suscipit의 그래서 우린. Mauris pharetra feugiat 분담금 아이디 된 Lacinia. accumsan의 tincidunt에서 Etiam faucibus mauris 아이디 tempor의 egestas. 음주 운전 luctus turpis. Phasellus의 risus의 risus, volutpat의 VEL의 TELLUS 교류, tincidunt fringilla 마사. Etiam hendrerit 슬픔 eget 앤티 rutrum adipiscing. CRAS interdum의 ipsum의의 mattis, 템퍼의 mauris의 VEL , 언제나 ipsum의. 음주 운전 나오지 슬픔의 유타 enim lobortis pellentesque ultricies 교류 ligula. pellentesque convallis ELIT에 NiSi, 아이디 vulputate ipsum의 유타 ullamcorper. CRAS 교류 pulvinar의 푸 루스는 교류 viverra 동부 표준시. Suspendisse의 potenti. 정수 pellentesque neque 등 elementum의 템퍼 스. ligula의 유타에서 Curabitur의 BIBENDUM rhoncus. </ P> <P> Quisque pharetra의 velit 아이디 velit는 pretium. Nullam에게 유럽 연합 (EU) quis enim. Pellentesque의 pellentesque, facilisis의 hendrerit에서 metus, lectus의 velit의 facilisis 레오, quis volutpat turpis arcu quis enim. Nulla viverra가 lorem elementum interdum ultricies. Suspendisse 언제나 그래서 우린 나오지 ligula의 간이을 iaculis accumsan quam의 NEC 분담금 몰리스 템퍼 스. Morbi의 VEL의 accumsan의 DIAM, eget convallis TELLUS. Suspendisse의 potenti. </ P> <HR> <H2 ID = "섹션-4"> 파트 IV </ H2> <P> Suspendisse는이 orci의 facilisis, dignissim의 tortor 이력서가 ultrices 마일. 도박 iaculis lacus. Phasellus 이력서의 convallis의 ligula, NEC의 volutpat의 TELLUS. Vivamus scelerisque 몰리스 nisl, NEC vehicula ELIT egestas가. Sed의 luctus의 metus 아이디 마일 gravida이 faucibus convallis neque pretium. 마에 케 나스 quis 사피엔스 유타 레오 fringilla의 tempor 이력서 레오 AMET 앉아있다. Donec imperdiet 템퍼 placerat. Pellentesque pulvinar ultrices NUNC 나오지 ultrices. Morbi VEL 마일 pretium, fermentum lacus 외, viverra TELLUS. Phasellus sodales 리베로 NEC의 음주 운전 convallis, AMET 앉아 fermentum 사피엔스 auctor . 도박 판돈 ipsum의 primis에 faucibus orci luctus 등 ultrices posuere cubilia Curae ;. Sed의 유럽 연합 (EU)의 elementum의 nibh, quis varius 리베로 </ P> <P> 도박은 quam의 유타 마그나의 quis consequat의 faucibus합니다. Pellentesque eget에 NiSi 마일 suscipit의 tincidunt. UT 템퍼의 의견을 risus합니다. Pellentesque viverra sagittis quam mattis에서. Suspendisse의 potenti을. Aliquam이 lacus의 blandit에서 facilisis gravida ODIO. Phasellus의 auctor의 velit을 gravida의 nibh을 AMET 앉아 , commodo iaculis 그래서 우린 viverra. Etiam 이력서 추정 arcu. Mauris VEL congue 슬픔. aliquam eget 마일 마일. Fusce의 quam의 tortor, commodo 교류 음주 운전 quis, BIBENDUM viverra erat. 마에 케 나스 mattis lectus enim, quis tincidunt 음주 운전 molestie euismod. Curabitur 등 DIAM tristique, accumsan NUNC 유럽 연합 (EU), hendrerit의 TELLUS. < / P> <P> Phasellus의 fermentum, neque 앉아 sodales의 tempor을 AMET, enim는 interdum에게 에로스, eget luctus ipsum의 에로스 유타 ligula. 눈크 ornare erat quis faucibus molestie. Proin malesuada consequat commodo. Mauris iaculis, 에로스 유타 dapibus luctus, 마사 enim elementum 푸 루스, 앉아 앤티 AMET tristique의 푸 루스 푸 루스의 NEC의 고양이 속. Morbi quam의 DIAM에서 도박 사피엔스 eget 간이 pulvinar. 남. Proin rhoncus, 고양이 속 elementum accumsan 의견, 고양이 속에 NiSi 도박의 TELLUS, 등 ultrices risus 고양이 속에서 orci. Quisque 도박 현미경 nisl, VEL congue 레오 의견의 NEC. velit sagittis ullamcorper VEL에서 CRAS의 eget의 추정 등 lectus. HAC habitasse의 platea의 dictumst합니다. Etiam interdum iaculis velit, VEL sollicitudin가 lorem feugiat는 AMET 앉아. Etiam luctus, quam 나오지 sodales aliquam,가 lorem 리베로 hendrerit urna, faucibus rhoncus 마사 nibh 고양이 속에서. Curabitur 교류 템퍼의 nulla, 유타 언제나 erat. Vivamus 간이 ullamcorper SEM, ornare egestas mauris facilisis ID입니다. </ P> <P> 유타 유타 risus의 nisl. 마그나의 luctus에서 Fusce의 porttitor의 에로스, 비 congue의 nulla의 eleifend. Aenean porttitor의 feugiat의 슬픔은 AMET facilisis. Pellentesque venenatis 마그나 등 risus commodo하는 commodo의 turpis의 gravida. 남 몰리스 마사 dapibus urna aliquet, quis iaculis ELIT 앉아 sodales. Sed의 eget ornare orci, 유럽 연합 (EU)은 suscipit malesuada 그래서 우린. 눈크 lacus의 augue, 의견 quis 음주 운전 아이디, 된 Lacinia의 congue의 quam. Nulla SEM SEM, aliquam의 NEC의 슬픔 교류는, 템퍼 convallis NUNC. interdum 등 malesuada FAMES 교류 앤티 ipsum의 primis에 faucibus. Nulla convallis iaculis. Quisque eget commodo의 ligula. 저희에게 연락 레오 음주 운전에 facilisis의 quis의 eleifend, aliquet 이력서의 NUNC. Suspendisse의 fermentum의 ODIO 교류 마사 ultricies pellentesque. Fusce 유럽 연합 (EU) suscipit 마사. </ P> <HR> <H2 ID = "섹션-5"> 파트 V </ H2> <P> 남 eget의 푸 루스의 NEC 추정 consectetur vehicula. Nullam는에 viverra 리베로 egestas는 AMET 앉아 nisl risus을 ultrices. Etiam porttitor 슬픔 비 에로스 pulvinar malesuada. 도박 비 laoreet arcu AMET 추정 몰리스 nulla 템퍼 aliquet. 저희에게 연락 luctus hendrerit 앉아있다. Morbi consequat placerat 마그나, 교류 ornare의 ODIO의 sagittis가 나오지. Donec 이력서의 ullamcorper의 푸 루스. Vivamus 비 metus 교류 그래서 우린의 간이 volutpat. </ P> <P> Vivamus mattis accumsan erat, VEL convallis risus pretium NEC. 정수 NUNC의 nulla, viverra 유타 SEM 비, scelerisque vehicula arcu. Fusce BIBENDUM convallis augue lobortis을 AMET 앉아. CRAS 간이 urna turpis는 lobortis의 푸 루스의 adipiscing ID를 sodales. 마에 케 나스 ullamcorper, turpis을 suscipit pellentesque fringilla, 마사 lacus pulvinar 마일 , dapibus의 TELLUS에서 NEC dignissim의 velit의 arcu의 eget 푸 루스. 남, eget의 euismod의 nisl. UT eget venenatis 사피엔스. Vivamus vulputate varius mauris, VEL의 varius nisl의 facilisis 교류. Nulla aliquet 그래서 우린 nibh ornare, 유럽 연합 (EU)의 congue rutrum neque. </ P> <P> Suspendisse는이 orci의 facilisis, dignissim의 tortor 이력서가 ultrices 마일. 도박 iaculis lacus. Phasellus 이력서의 convallis의 ligula, NEC의 volutpat의 TELLUS. Vivamus scelerisque 몰리스 nisl, NEC vehicula ELIT egestas가. Sed의 luctus의 metus 아이디 마일 gravida이 faucibus convallis neque pretium. 마에 케 나스 quis 사피엔스 유타 레오 fringilla의 tempor 이력서 레오 AMET 앉아있다. Donec imperdiet 템퍼 placerat. Pellentesque pulvinar ultrices NUNC 나오지 ultrices. Morbi VEL 마일 pretium, fermentum lacus 외, viverra TELLUS. Phasellus sodales 리베로 NEC의 음주 운전 convallis, AMET 앉아 fermentum 사피엔스 auctor . 도박 판돈 ipsum의 primis에 faucibus orci luctus 등 ultrices posuere cubilia Curae ;. Sed의 유럽 연합 (EU)의 elementum의 nibh, quis varius 리베로 </ P> <P> Morbi 나오지 fermentum의 ipsum의. Morbi orci vulputate tortor ornare blandit quis orci. Donec aliquam sodales gravida. 유타 ullamcorper의에 NiSi에서 교류 pretium의 velit. 도박 이력서의 lectus의 volutpat, consequat의가 lorem는 AMET pulvinar의 TELLUS 앉아. tincidunt의 VEL 레오에서 eget pulvinar. 에로스 비 lacus의 Curabitur malesuada의 aliquam합니다. 저희에게 연락 등 템퍼 ODIO. 정수 quam의 NUNC. HAC habitasse의 platea의 dictumst합니다. aliquam의 간이 nibh의 nulla, 등 mattis turpis placerat eget. Pellentesque의 음주 운전 DIAM, pellentesque VEL gravida 아이디, 유럽 연합 (EU)의 마그나 accumsan . 언제나의 arcu SED, 유타 dignissim 레오. </ P> <P> SED 이력서의 lobortis의 DIAM, 아이디 molestie 마그나. Aliquam consequat ipsum의 quis 동부 표준시 의견 ultrices. Aenean의 nibh의 velit, DIAM 아이디에 fringilla, blandit hendrerit lacus. Donec vehicula rutrum TELLUS eget fermentum. Pellentesque 교류 erat 등 arcu ornare tincidunt. Aliquam의 erat volutpat. Vivamus lobortis urna quis gravida 언제나 . condimentum에서, 동부 표준시 faucibus luctus, 마일 슬픔의 cursus의 마일, 아이디 vehicula arcu risus nibh. Pellentesque blandit 사피엔스 lacus, VEL vehicula NUNC feugiat는 AMET 앉아있다. </ P> </ DIV> </ DIV> </ DIV> </ BODY> </ HTML>

    »시도

    결과는 다음과 같다 :

    추가 탐색 (부착)의 데이터 속성을 연결

  • 자바 스크립트에 의해 다음과 같이 당신은 요소 자바 스크립트를 수동으로 추가 탐색 (부착)를 추가 할 수 있습니다 :
    $ ( '#의 MyAffix'). 부착 ({
   오프셋 : {
	  최고 : 100, 하단 : 함수 () {
		 수익 (this.bottom = 
			$ ( '. BS-바닥 글'). OuterHeight (사실))
		 }
	  }
})

    예

    다음의 예는 자바 스크립트의 사용을 통해 추가 탐색 (접사) 위젯을 사용하는 방법을 보여줍니다 :

    예

    <! DOCTYPE HTML> <HTML> <헤드> <메타 캐릭터 = "UTF-8"> <제목> 추가 탐색을 부트 스트랩 (부착) 위젯 </ 제목> <링크 REL은 = "스타일" HREF = "http://cdn.static.w3big.com/libs/bootstrap/3.3.7/css/bootstrap.min.css"> <스크립트 SRC = "http://cdn.static.w3big.com/libs/jquery/2.1.1/jquery.min.js"> </ script> <스크립트 SRC = "http://cdn.static.w3big.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"> </ script> <스타일>
    / * 사용자 정의 스타일 * / UL의 .nav-탭 { 폭 : 140 픽셀 ; 여백 - 가기 : 20 픽셀 ; 국경 반경 : 4 픽셀 ; 테두리 : 1 픽셀 고체 #ddd ; 상자 그림자 : 0 1 픽셀 4 픽셀 RGBA (0, 0, 0, 0.067) ;} UL .nav-탭 리 { 마진 : 0 ; 국경 정상 : 1 픽셀 고체 #ddd ;} UL .nav-탭 리 : 첫 아이 { 국경 가기 : 없음 ;} UL .nav-탭 리 { 마진 : 0 ; 패딩 : 8 픽셀 16 픽셀 ; 국경 반경 : 0 ;} UL .nav-탭 리 .active는 A, UL .nav-탭 리 .active는 A : 가져가 { 색상 : #fff ; 배경 : # 0088cc ; 테두리 : 1 픽셀 고체 # 0088cc ;} UL .nav-탭 리 : 첫 아이 { 국경 반경 : 4 픽셀 4 픽셀 0 0 ;} UL .nav-탭 리 : 마지막 아이 { 국경 반경 : 0 0 4 픽셀 4 픽셀 ;} UL .nav-탭 .affix { 최고 : 30 픽셀 / *의 상단 위치 설정 고정 요소 * / }
    </ 스타일> <스크립트>
    $ (문서). 준비 (함수 () {$ ( "#myNav"). 부착 ({ 오프셋 : { 상단 : 125 } });});
    </ 스크립트> </ 헤드> <바디 데이터 스파이 = "스크롤" 데이터 대상 = "#myScrollspy"> <사업부 클래스 = "컨테이너"> <사업부 클래스 = "대형 기기"> <H1> 부트 스트랩 부착 </ H1 > </ DIV> <사업부 클래스 = "행"> <사업부 클래스 = "COL-XS-3 " ID = "myScrollspy"> <UL 클래스 = "탐색 탐색 - 탭 탐색 -stacked" ID = "myNav"> <리 클래스> <A = "활성" HREF = "# 섹션-1" > 첫 번째 부분 </ A> </ 리> <LI> <A HREF = "# 섹션-2" > 두 번째 부분 </ A> </ 리> <LI> <A HREF = "# 섹션-3" > 파트 III </ A> </ 리> <LI> <A HREF = "# 섹션-4" > 파트 IV </ A> </ 리> <LI> <A HREF = "# 섹션-5" > 파트 V </ A> </ 리> </ UL> </ DIV> <사업부 클래스 = "COL-XS-9 "> <H2 ID = "섹션-1"> 첫 번째 부분 </ H2> <P> LOREM의 ipsum의 슬픔이 AMET 앉아 consectetur의 adipiscing의 ELIT가. 남 유럽 연합 (EU) SEM tempor,에서 varius의 quam는 음주 운전을 luctus. Mauris 마그나 metus는 NEC의 turpis의 VEL, 언제나 malesuada 분담금. 도박 아이디 metus 교류 nisl BIBENDUM scelerisque 비 비 푸 루스. Suspendisse을 dapibus varius nibh 비 aliquet sagittis. tincidunt의에 orci 도박 elementum을 AMET 앉아. Vivamus fermentum을 arcu에 aliquam에. Quisque aliquam 간이 ODIO에 fringilla. Vivamus BIBENDUM 유럽 연합 (EU)에서 nisl 레오, blandit, tristique eget의 risus. 정수 aliquet quam 유타 ELIT suscipit, 아이디 interdum을 neque porttitor. 정수 faucibus ligula. < / P> <P> 도박은 quam의 유타 마그나의 quis consequat의 faucibus합니다. Pellentesque eget에 NiSi 마일 suscipit의 tincidunt. UT 템퍼의 의견을 risus합니다. Pellentesque viverra sagittis quam mattis에서. Suspendisse의 potenti을. Aliquam이 lacus의 blandit에서 facilisis gravida ODIO. Phasellus의 auctor의 velit을 gravida의 nibh을 AMET 앉아 , commodo iaculis 그래서 우린 viverra. Etiam 이력서 추정 arcu. Mauris VEL congue 슬픔. aliquam eget 마일 마일. Fusce의 quam의 tortor, commodo 교류 음주 운전 quis, BIBENDUM viverra erat. 마에 케 나스 mattis lectus enim, quis tincidunt 음주 운전 molestie euismod. Curabitur 등 DIAM tristique, accumsan NUNC 유럽 연합 (EU), hendrerit의 TELLUS. < / P> <HR> <H2 ID = "섹션-2"> 두 번째 섹션 </ H2> <P> Nullam hendrerit 그래서 우린 비 레오 aliquet imperdiet. Etiam에서 sagittis lectus. Suspendisse ultrices placerat accumsan. Mauris quis dapibus orci.에서 dapibus velit blandit pharetra tincidunt. Quisque 비 사피엔스 NEC의 lacus condimentum의 facilisis의 유타 iaculis enim. Sed의 viverra interdum BIBENDUM. Donec 교류 sollicitudin의 슬픔. fringilla 이력서의 lacus 나오지 rutrum에서. Phasellus congue의 도박의 ligula 나오지 consequat. </ P> <P> 도박은 lacus, scelerisque consectetur 교류 fermentum의가 lorem convallis가 나오지도. 남 ODIO의 tortor, 의견 quis malesuada pellentesque 이력서의 orci,시. Vivamus elementum를, 유럽 연합 (EU)의 auctor의 lobortis, DIAM velit egestas lacus을 고양이 속 urna quis 분담금 metus fermentum을 quis. Sed의 facilisis에서 리베로. 정액 sociis natoque penatibus 등 magnis 창피 출산 몬테 클라, nascetur ridiculus의 뮤스. 도박 BIBENDUM blandit 슬픔. 눈크의 orci의 슬픔에 molestie 선관위 nibh, hendrerit의 tincidunt 분담금. Vivamus SEM augue, hendrerit 비 사피엔스에서, 몰리스 ornare augue. </ P > <HR> <H2 ID = "섹션-3"> 파트 III </ H2> <P> 정수 pulvinar 레오 아이디 risus의 pellentesque 도박. Sed의의 DIAM의 리베로는 sodales eget 사피엔스 VEL, porttitor BIBENDUM enim. Donec는 NEC의 분담금에 nibh 이력서의가 lorem porttitor의 blandit을 나오지. Pellentesque 이력서의 metus의 ipsum의. Phasellus는 NUNC 교류 현미경 malesuada의 condimentum을 나오지. Etiam을에 aliquam lectus. 남 VEL 사피엔스의 DIAM. Donec pharetra 아이디 arcu의 eget의 blandit. Proin imperdiet mattis augue porttitor있다. Quisque 템퍼 enim 아이디 lobortis의 feugiat. 푸 루스의 된 Lacinia의 porttitor에서 Suspendisse tincidunt risus quis 슬픔 fringilla blandit. UT 나오지 사피엔스. Nullam가, 고양이 속 iaculis pretium의 ornare, 슬픔의 nisl의 언제나의 tortor, VEL sagittis lacus 추정 consequat 에로스. Sed의 아이디 pretium의 nisl. Curabitur의 슬픔의 nisl, laoreet 이력서의 aliquam 아이디, tincidunt는 AMET 앉아 mauris. </ P> <P> Phasellus 이력서의 suscipit의 그래서 우린. Mauris pharetra feugiat 분담금 아이디 된 Lacinia. accumsan의 tincidunt에서 Etiam faucibus mauris 아이디 tempor의 egestas. 음주 운전 luctus turpis. Phasellus의 risus의 risus, volutpat의 VEL의 TELLUS 교류, tincidunt fringilla 마사. Etiam hendrerit 슬픔 eget 앤티 rutrum adipiscing. CRAS interdum의 ipsum의의 mattis, 템퍼의 mauris의 VEL , 언제나 ipsum의. 음주 운전 나오지 슬픔의 유타 enim lobortis pellentesque ultricies 교류 ligula. pellentesque convallis ELIT에 NiSi, 아이디 vulputate ipsum의 유타 ullamcorper. CRAS 교류 pulvinar의 푸 루스는 교류 viverra 동부 표준시. Suspendisse의 potenti. 정수 pellentesque neque 등 elementum의 템퍼 스. ligula의 유타에서 Curabitur의 BIBENDUM rhoncus. </ P> <P> Quisque pharetra의 velit 아이디 velit는 pretium. Nullam에게 유럽 연합 (EU) quis enim. Pellentesque의 pellentesque, facilisis의 hendrerit에서 metus, lectus의 velit의 facilisis 레오, quis volutpat turpis arcu quis enim. Nulla viverra가 lorem elementum interdum ultricies. Suspendisse 언제나 그래서 우린 나오지 ligula의 간이을 iaculis accumsan quam의 NEC 분담금 몰리스 템퍼 스. Morbi의 VEL의 accumsan의 DIAM, eget convallis TELLUS. Suspendisse의 potenti. </ P> <HR> <H2 ID = "섹션-4"> 파트 IV </ H2> <P> Suspendisse는이 orci의 facilisis, dignissim의 tortor 이력서가 ultrices 마일. 도박 iaculis lacus. Phasellus 이력서의 convallis의 ligula, NEC의 volutpat의 TELLUS. Vivamus scelerisque 몰리스 nisl, NEC vehicula ELIT egestas가. Sed의 luctus의 metus 아이디 마일 gravida이 faucibus convallis neque pretium. 마에 케 나스 quis 사피엔스 유타 레오 fringilla의 tempor 이력서 레오 AMET 앉아있다. Donec imperdiet 템퍼 placerat. Pellentesque pulvinar ultrices NUNC 나오지 ultrices. Morbi VEL 마일 pretium, fermentum lacus 외, viverra TELLUS. Phasellus sodales 리베로 NEC의 음주 운전 convallis, AMET 앉아 fermentum 사피엔스 auctor . 도박 판돈 ipsum의 primis에 faucibus orci luctus 등 ultrices posuere cubilia Curae ;. Sed의 유럽 연합 (EU)의 elementum의 nibh, quis varius 리베로 </ P> <P> 도박은 quam의 유타 마그나의 quis consequat의 faucibus합니다. Pellentesque eget에 NiSi 마일 suscipit의 tincidunt. UT 템퍼의 의견을 risus합니다. Pellentesque viverra sagittis quam mattis에서. Suspendisse의 potenti을. Aliquam이 lacus의 blandit에서 facilisis gravida ODIO. Phasellus의 auctor의 velit을 gravida의 nibh을 AMET 앉아 , commodo iaculis 그래서 우린 viverra. Etiam 이력서 추정 arcu. Mauris VEL congue 슬픔. aliquam eget 마일 마일. Fusce의 quam의 tortor, commodo 교류 음주 운전 quis, BIBENDUM viverra erat. 마에 케 나스 mattis lectus enim, quis tincidunt 음주 운전 molestie euismod. Curabitur 등 DIAM tristique, accumsan NUNC 유럽 연합 (EU), hendrerit의 TELLUS. < / P> <P> Phasellus의 fermentum, neque 앉아 sodales의 tempor을 AMET, enim는 interdum에게 에로스, eget luctus ipsum의 에로스 유타 ligula. 눈크 ornare erat quis faucibus molestie. Proin malesuada consequat commodo. Mauris iaculis, 에로스 유타 dapibus luctus, 마사 enim elementum 푸 루스, 앉아 앤티 AMET tristique의 푸 루스 푸 루스의 NEC의 고양이 속. Morbi quam의 DIAM에서 도박 사피엔스 eget 간이 pulvinar. 남. Proin rhoncus, 고양이 속 elementum accumsan 의견, 고양이 속에 NiSi 도박의 TELLUS, 등 ultrices risus 고양이 속에서 orci. Quisque 도박 현미경 nisl, VEL congue 레오 의견의 NEC. velit sagittis ullamcorper VEL에서 CRAS의 eget의 추정 등 lectus. HAC habitasse의 platea의 dictumst합니다. Etiam interdum iaculis velit, VEL sollicitudin가 lorem feugiat는 AMET 앉아. Etiam luctus, quam 나오지 sodales aliquam,가 lorem 리베로 hendrerit urna, faucibus rhoncus 마사 nibh 고양이 속에서. Curabitur 교류 템퍼의 nulla, 유타 언제나 erat. Vivamus 간이 ullamcorper SEM, ornare egestas mauris facilisis ID입니다. </ P> <P> 유타 유타 risus의 nisl. 마그나의 luctus에서 Fusce의 porttitor의 에로스, 비 congue의 nulla의 eleifend. Aenean porttitor의 feugiat의 슬픔은 AMET facilisis. Pellentesque venenatis 마그나 등 risus commodo하는 commodo의 turpis의 gravida. 남 몰리스 마사 dapibus urna aliquet, quis iaculis ELIT 앉아 sodales. Sed의 eget ornare orci, 유럽 연합 (EU)은 suscipit malesuada 그래서 우린. 눈크 lacus의 augue, 의견 quis 음주 운전 아이디, 된 Lacinia의 congue의 quam. Nulla SEM SEM, aliquam의 NEC의 슬픔 교류는, 템퍼 convallis NUNC. interdum 등 malesuada FAMES 교류 앤티 ipsum의 primis에 faucibus. Nulla convallis iaculis. Quisque eget commodo의 ligula. 저희에게 연락 레오 음주 운전에 facilisis의 quis의 eleifend, aliquet 이력서의 NUNC. Suspendisse의 fermentum의 ODIO 교류 마사 ultricies pellentesque. Fusce 유럽 연합 (EU) suscipit 마사. </ P> <HR> <H2 ID = "섹션-5"> 파트 V </ H2> <P> 남 eget의 푸 루스의 NEC 추정 consectetur vehicula. Nullam는에 viverra 리베로 egestas는 AMET 앉아 nisl risus을 ultrices. Etiam porttitor 슬픔 비 에로스 pulvinar malesuada. 도박 비 laoreet arcu AMET 추정 몰리스 nulla 템퍼 aliquet. 저희에게 연락 luctus hendrerit 앉아있다. Morbi consequat placerat 마그나, 교류 ornare의 ODIO의 sagittis가 나오지. Donec 이력서의 ullamcorper의 푸 루스. Vivamus 비 metus 교류 그래서 우린의 간이 volutpat. </ P> <P> Vivamus mattis accumsan erat, VEL convallis risus pretium NEC. 정수 NUNC의 nulla, viverra 유타 SEM 비, scelerisque vehicula arcu. Fusce BIBENDUM convallis augue lobortis을 AMET 앉아. CRAS 간이 urna turpis는 lobortis의 푸 루스의 adipiscing ID를 sodales. 마에 케 나스 ullamcorper, turpis을 suscipit pellentesque fringilla, 마사 lacus pulvinar 마일 , dapibus의 TELLUS에서 NEC dignissim의 velit의 arcu의 eget 푸 루스. 남, eget의 euismod의 nisl. UT eget venenatis 사피엔스. Vivamus vulputate varius mauris, VEL의 varius nisl의 facilisis 교류. Nulla aliquet 그래서 우린 nibh ornare, 유럽 연합 (EU)의 congue rutrum neque. </ P> <P> Suspendisse는이 orci의 facilisis, dignissim의 tortor 이력서가 ultrices 마일. 도박 iaculis lacus. Phasellus 이력서의 convallis의 ligula, NEC의 volutpat의 TELLUS. Vivamus scelerisque 몰리스 nisl, NEC vehicula ELIT egestas가. Sed의 luctus의 metus 아이디 마일 gravida이 faucibus convallis neque pretium. 마에 케 나스 quis 사피엔스 유타 레오 fringilla의 tempor 이력서 레오 AMET 앉아있다. Donec imperdiet 템퍼 placerat. Pellentesque pulvinar ultrices NUNC 나오지 ultrices. Morbi VEL 마일 pretium, fermentum lacus 외, viverra TELLUS. Phasellus sodales 리베로 NEC의 음주 운전 convallis, AMET 앉아 fermentum 사피엔스 auctor . 도박 판돈 ipsum의 primis에 faucibus orci luctus 등 ultrices posuere cubilia Curae ;. Sed의 유럽 연합 (EU)의 elementum의 nibh, quis varius 리베로 </ P> <P> Morbi 나오지 fermentum의 ipsum의. Morbi orci vulputate tortor ornare blandit quis orci. Donec aliquam sodales gravida. 유타 ullamcorper의에 NiSi에서 교류 pretium의 velit. 도박 이력서의 lectus의 volutpat, consequat의가 lorem는 AMET pulvinar의 TELLUS 앉아. tincidunt의 VEL 레오에서 eget pulvinar. 에로스 비 lacus의 Curabitur malesuada의 aliquam합니다. 저희에게 연락 등 템퍼 ODIO. 정수 quam의 NUNC. HAC habitasse의 platea의 dictumst합니다. aliquam의 간이 nibh의 nulla, 등 mattis turpis placerat eget. pellentesque의 음주 운전 DIAM, pellentesque VEL gravida 아이디, 유럽 연합 (EU)의 마그나 accumsan . 언제나의 arcu SED, 유타 dignissim 레오. </ P> <P> SED 이력서의 lobortis의 DIAM, 아이디 molestie 마그나. Aliquam consequat ipsum의 quis 동부 표준시 의견 ultrices. Aenean의 nibh의 velit, DIAM 아이디에 fringilla, blandit hendrerit lacus. Donec vehicula rutrum TELLUS eget fermentum. Pellentesque 교류 erat 등 arcu ornare tincidunt. Aliquam의 erat volutpat. Vivamus lobortis urna quis gravida 언제나 . condimentum에서, 동부 표준시 faucibus luctus, 마일 슬픔의 cursus의 마일, 아이디 vehicula arcu risus nibh. Pellentesque blandit 사피엔스 lacus, VEL vehicula NUNC feugiat는 AMET 앉아있다. </ P> </ DIV> </ DIV> </ DIV> </ BODY> </ HTML>

    »시도

    결과는 다음과 같다 :

    추가 탐색 (부착)은 플러그인 자바 스크립트

CSS 위치하여

추가 탐색 (부착) 플러그 - 인 모드 위의 두, 당신은 CSS 위치의 콘텐츠를 통해 이동해야합니다. .affix, .affix탑과 .affix 바닥 :추가 탐색 (부착)는 플러그 - 인 세 가지 클래스를 전환, 각 클래스는 특정상태를보여주었다.이 세 가지 상태 (이 플러그인에 의존하지 않는)에 대한 자신의 CSS를 설정하려면 다음 단계를 수행하십시오.

  • 처음에, 그 맨 위의 위치에 표시하는플러그인 .affix 탑 요소를 추가합니다.이번에는 CSS 포지셔닝을 필요로하지 않습니다.
  • 추가 탐색 (부착) 요소를 추가 스크롤 할 때, 실제 추가 탐색 (부착)을 트리거한다.(부트 스트랩 CSS 코드에 의해 제공) 고정 :.affix 탑 및 설정위치를대체 할.affix이시점에서.
  • 당신이 오프셋 (offset)의 하단을 정의하면이 위치에 도달 스크롤은.affix 바닥을 교체 .affix해야할때.오프셋 때문에 당신이 적절한 CSS를 설정 동시에 요구되는 오프셋 설정 한 경우, 선택 사항입니다. 이 경우,필요에 위치 추가 절대 ;.

옵션

전달하는 데이터의 속성이나 자바 스크립트를 통해 몇 가지 옵션이 있습니다. 다음 표에서는 이러한 옵션을 나열합니다 :

选项名称类型/默认值Data 属性名称描述
offsetnumber | function | object
默认值：10		data-offset当计算滚动位置时，距离顶部的偏移像素。如果设置了一个数字，则该偏移量的值将被应用在顶部和底部。如果设置了一个对象偏移，则其值形如 offset: { top: 10 } 或 offset: { top: 10, bottom: 5 }。如果需要动态计算偏移，请使用函数。