jQuery 고정 요소 플러그인 scrolltofixed 사용 가이드_jquery

저는 얼마 전 웹사이트를 변경할 때 이 플러그인을 한 번 사용했습니다. 스크롤 막대가 스크롤되면 상단 메뉴 막대가 고정되어야 합니다. 일반적인 내용도 썼지만 기사에서만 언급했습니다. 기사 주소: jQuery 플러그인 고정 요소 위치. 이번 글에서는 이를 다시 정리해 보겠습니다.

1.스크롤 고정 플러그인 기능

페이지를 스크롤할 때 요소가 계속 표시되도록 요소의 위치를 ​​수정합니다.

II.scrolltofixed 공식 주소

https://github.com/bigspotteddog/ScrollToFixed. 아래에는 공식 주소에 대한 사용 지침과 플러그인의 속성 및 방법에 대한 설명이 있습니다. 데모에는 자세한 사용 사례도 있으므로 다운로드하여 살펴볼 수 있습니다.

3.scrolltofixed 사용방법

scrolltofixed 플러그인은 상단, 사이드바를 수정하거나 "페이지의 모든 요소를 ​​수정"할 수 있습니다. 다른 플러그인과 함께 사용하면 매우 좋은 결과를 얻을 수 있습니다. 스크롤 막대가 특정 위치에 도달한 것으로 감지되면 특정 요소가 표시됩니다. 테스트 사례에서는 Scrollto 플러그인과 함께 scrolltofixed 플러그인을 사용합니다. 구체적인 효과는 아래 "테스트 파일"에서 확인할 수 있습니다.

1. 참고자료

scrolltofixed 플러그인은 사용이 매우 간단합니다. 두 개의 js만 인용하면 됩니다. 한 파일은 jquery이고 다른 파일은 scrolltofixed 플러그인에 필요한 js 파일입니다.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-scrolltofixed.js"></script>

2.css 스타일 파일. 플러그인을 사용하기 위해 스타일 파일이 필요하지는 않지만 고정 위치 요소를 정의해야 하며 요소에는 자체 사용자 정의 스타일이 필요합니다. 스타일 파일은 여기에 게시되지 않으며 아래 "테스트 파일"을 볼 수 있습니다.

3.js 코드. 초기화는 한 문장으로 수행할 수도 있고 필요에 따라 초기화 속성을 설정할 수도 있습니다. 요소의 스타일, 고정 시 표시되는 스타일, 어떤 요소에 도달하는지, 고정된 요소가 더 이상 고정되지 않는지 등. 공식 데모를 보실 수 있습니다.

//이 글은 고정 요소만 테스트하고 기본 속성을 사용합니다
$('#operbox').scrollToFixed();

4. HTML을 사용했습니다. 고정 위치 요소는 html을 사용해야 합니다. 아래에서 "테스트 파일"을 볼 수 있습니다.

scrolltofixed 플러그인을 테스트할 때 테스트 케이스의 효율성을 높이기 위해 scrollto 플러그인도 사용하여 지정된 요소로 스크롤합니다.
테스트 환경: IE8 브라우저, 크롬, 파이어폭스. 테스트 결과:

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.