스마트 스티커 요소를 만들기위한 15 개의 jQuery 플러그인
예를 들어 사이트를 위아래로 스크롤 할 때 사이트의 특정 요소가 특정 위치에 고정 된 것을 보는 것이 일반적입니다. 탐색 메뉴, 머리글 또는 세로 막대. 이렇게하면 사용자의 위치에 상관없이 요소를 즉시 사용할 수 있습니다..
끈적 끈적한 요소라고 불리는이 방법은 CSS를 사용하여 구현할 수 있지만이 방법을 사용하면 효과가 여러 브라우저에서 신뢰할 수 없습니다. 그래서 JS 라이브러리와 jQuery 플러그인을한데 모아 놓았습니다.이 플러그인을 사용하면 별다른 노력없이이 특별한 UX 디자인을 구현할 수 있습니다..
1. 웨이 포인트
웨이 포인트는 뷰포트의 요소 위치를 기반으로 함수를 실행하는 라이브러리입니다. 해당 요소를 만드는 바로 가기 기능이 함께 제공됩니다. “어려운”. 스크롤 방향을 사용자 정의 할 수 있습니다. - 쪽으로, 내려가는, 심지어 권리 과 왼쪽 - 어떤 요소가 뷰포트 내에 고정되어야하는지.
- 의존: 없음 / jQuery (선택 사항)
- 특허: MIT 라이센스
2. 스티커 키트
와 고정 키 킷, 뷰포트 내에 요소 스틱을 만들 수있을뿐만 아니라 한 번에 여러 요소에 지정하는 부모 요소 내에 스틱을 지정할 수 있습니다. 플러그인에는 맞춤 이벤트 및 트리거를 포함한 몇 가지 고급 설정이 함께 제공됩니다..
- 의존: jQuery
- 특허: WTFPL
3. StickyJS
StickyJS 그것이 말한 것을하는 사용하기 쉬운 jQuery 끈적 플러그인입니다. 플러그인은 바로 작동합니다. 그러나 사용자 정의가 필요한 경우 옵션 / 설정, 사용자 정의 메소드 및 이벤트와 함께 제공됩니다..
- 의존: jQuery
- 특허: MIT 라이센스
4. 헤드 룸
고정 사이트 헤더는 모바일에서 사이트를 볼 때 차이를 만드는 중요한 수직 공간을 차지합니다. 헤드 룸 끈적한 헤더를 똑똑하게 만들 JavaScript 라이브러리입니다. 사용자가 페이지를 아래로 스크롤하여 위로 스크롤하면 헤더가 숨겨집니다..
- 의존: 없음 / jQuery (선택 사항) / 각도 (선택 사항)
- 특허: MIT 라이센스
5. MakefixedJS
수정 사용자가 페이지를 스크롤 할 때 요소를 동적으로 고정시킬 수 있습니다. 그냥 전화 해. makeFixed () 기능을 고정하고자하는 요소에 적용합니다. 데모를 확인하여 작동시 확인하십시오..
- 의존: jQuery
- 특허: GPL
6. 자정 JS
한밤중 여러 헤더 / 요소를 고수하고 문서 내에서의 위치 (DOM 트리)에 따라 전환 할 수 있습니다. 데모를 확인하여 의미를 확인하십시오. 또한 색상을 추가하는 것만으로 색상을 변경할 수 있습니다. 데이터 자정 지정된 색상 이름을 가진 속성.
- 의존: jQuery
- 특허: MIT 라이센스
7. ScrollMagic
ScrollMagic 페이지 스크롤 중에 상호 작용을 추가하는 고급 기능이 있습니다. 특정 스크롤 위치의 요소를 고정하거나 스크롤 위치를 기반으로 애니메이션을 추가하거나 멋진 시차 효과를 만들 수 있습니다. 데모는이 플러그인이 할 수있는 것에 대한 통찰력을 제공합니다..
- 의존: jQuery / Velocity.js
- 특허: 이중 라이센스 (MIT 및 GPL)
8. 화면 상
화면에 Waypoints와 유사합니다. 요소가 브라우저 뷰포트 내의 특정 위치로 들어가거나 떠날 때 또는 도달 할 때 함수를 실행할 수 있습니다.
- 의존: jQuery
- 특허: MIT 라이센스
9. jQuery 핀
jQuery Pin 작은 jQuery 플러그인으로 “핀” 또는 “고정 해제” 요소를 위치로 스크롤 할 수 있습니다. 이 플러그인의 가장 좋아하는 부분은 특정 뷰포트 너비에서 플러그인을 비활성화하는 옵션입니다..
- 의존: jQuery
- 특허: BSD 라이센스
10. 스티키 플로트
스티키 플로트 요소를 부모에 상대적으로 고정 된 위치에 제공 할 수 있습니다. 제공된 매개 변수를 사용하거나 값을 변경하여 필요에 따라 고정 옵션을 설정할 수 있습니다. 여기에 데모를 잡아라..
- 의존: jQuery
- 특허: 정의되지 않음
11. 얼룩말 핀
얼룩말 핀 컨테이너에 요소 핀을 만드는 간단한 플러그인입니다. 이 플러그인을 사용하면 “끈적 거리는” 내비게이션, 사이드 바, 머리말과 꼬리말, 또는 사용자가 아래로 스크롤 할 때 계속 보이게하고 싶은 다른 요소와 같은 프로젝트의 요소에 적용됩니다. 데모보기.
- 의존: jQuery
- 특허: GPL 라이센스
12. HC 스티커
와 HC 스티커, 컨테이너, 특정 요소 또는 문서 자체를 참조하는 끈적 끈적한 요소를 만들 수 있습니다. 이 플러그인에는 상단 및 하단에서부터 부동까지의 거리, 기타 옵션과 같이 필요에 맞게 조정할 수있는 몇 가지 옵션이 있습니다..
- 의존: jQuery
- 특허: MIT 라이센스
13. 끈적 끈적한 모조
끈적 끈적한 모조 가볍고 빠르며 유연한 jQuery 플러그인으로 멋진 끈적한 요소를 만들 수 있습니다. 최신 브라우저와 호환되며 IE에서 정상적으로 저하됩니다..
- 의존: jQuery
- 특허: MIT 라이센스
14. 끈적 끈적한 Navbar
아래쪽으로 스크롤하면 하나의 페이지 탐색을 유지하려는 경우이 라이브러리는 사용자를위한 것입니다..끈적 끈적한 Navbar 탐색 창을 브라우저 창 상단에 놓고 앵커 링크를 강조 표시하여 페이지의 해당 섹션에 연결합니다. Animate.css를 추가하여 탐색 효과를 아름답게 꾸밀 수 있습니다..
- 의존: jQuery
- 특허: MIT 라이센스
15. StickyStack
StickyStack 사용자가 요소를 스크롤하고 뷰포트의 상단에 도달하면 요소가 다른 요소와 쌓입니다. 이 라이브러리를 사용하면 긴 페이지가 스택 된 카드로 변환됩니다..
- 의존: jQuery
- 특허: 정의되지 않음
