집 > 기사 > 웹 프론트엔드 > jQuery.Pin이 수직으로 스크롤될 때 고정 탐색 공유의 예

jQuery.Pin이 수직으로 스크롤될 때 고정 탐색 공유의 예

小云云원래의: 2018-01-10 13:48:461898검색

ZKEACMS의 탐색은 기본적으로 고정될 수 없습니다. 더 나은 사용자 경험을 제공하기 위해 페이지가 아래로 스크롤될 때 탐색이 상단에 고정되어 사용자가 더 쉽게 클릭할 수 있습니다. . 이 글은 주로 수직 스크롤을 위해 jQuery.Pin을 사용할 때 탐색을 수정하는 방법을 자세히 소개합니다. 관심 있는 친구들이 참고하면 도움이 될 것입니다.

jQuery Pin

jQuery용 플러그인인 jQuery.Pin의 도움으로 이 플러그인을 사용하여 페이지의 요소를 고정할 수 있습니다.

http://webpop.github.io/jquery.pin/

스크립트 추가

페이지에 스크립트를 추가하고 jquery.pin을 사용하여 탐색을 수정하세요. 스크립트를 추가해야 하는 횟수를 줄이기 위해 해당 뷰로를 사용하는 모든 페이지에 스크립트가 적용되도록 레이아웃에 스크립트를 추가할 수 있습니다.

1. 레이아웃 구성 요소 -> 기본 레이아웃 -> 페이지 하단에 스크립트를 추가합니다.

2. 스크립트 구성 요소를 선택하고 다음을 클릭합니다.

3. 다음 스크립트 내용을 입력하고 저장합니다.

<script type="text/javascript" src="http://cdn.zkea.net/Scripts/jquery.pin.min.js"></script>
<script type="text/javascript">
$(function () {
$(".navigation").closest(".widget").parent().css("z-index",10000).pin();
})
</script>

이제 해당 페이지로 이동하여 미리 볼 수 있습니다. 효과.

jQuery.Pin이 수직으로 스크롤될 때 고정 탐색 공유의 예

관련 기사