Fullpage.js 고정 네비게이션 바 - 위치 지정 네비게이션 바_javascript 기술 구현

FullPage.js는 전체 화면 스크롤 웹사이트(단일 페이지 웹사이트라고도 함)를 만들기 위한 간단하고 사용하기 쉬운 플러그인입니다. 전체 화면 스크롤 효과를 생성하는 것 외에도 웹 사이트에 수평 슬라이더 효과를 추가할 수도 있습니다. 태블릿과 모바일 장치를 포함한 다양한 화면 크기에 적응하는 능력.

저는 나만의 이력서를 만들기 시작했습니다. 고정된 탐색 모음을 사용하기로 결정하고 전체 화면 스크롤에 fullpage.js를 사용할 계획이었습니다.

전체 페이지 문서를 주의 깊게 읽은 후 추가 js 코드를 작성하지 않고도 다음과 같은 효과를 얻을 수 있음을 발견했습니다.

1. 페이지를 스크롤하면 탐색 모음이 자동으로 이 페이지의 라벨을 찾습니다.

2. 물론 라벨을 클릭하면 바로 이동하는 대신 해당 페이지로 스크롤됩니다.

1. 준비 작업은 먼저 fullpage.js를 가져와야 합니다.

공식 홈페이지는 https://github.com/alvarotrigo/fullPage.js
입니다.

<link rel="stylesheet" href="styles/jquery.fullPage.css">
<script src="scripts/jquery.min.js"></script>
<script src="scripts/jquery.fullPage.min.js"></script> 

Fullpage는 jquery를 기반으로 하므로 jquery를 import하는 것을 잊지 마세요.

2. 네비게이션 바 구조

<ul id="myMenu">
<li data-menuanchor="firstPage" class="menuList"><a href="#firstPage">首页</a></li>
<li data-menuanchor="secondPage"class="menuList"><a href="#secondPage">作品</a></li>
<li data-menuanchor="thirdPage" class="menuList"><a href="#thirdPage">技能</a></li>
<li data-menuanchor="fourthPage"class="menuList"><a href="#fourthPage">联系方式</a></li>
</ul> 

위 내비게이션 바의 구조는 다음과 같습니다. data-menuanchor는 전체 페이지에 필요하며, 노트의 href 속성에도 해당 값이 있어야 합니다.

3. 스크롤 페이지의 구조는 다음과 같이 매우 간단합니다

<div id="fullpage">
<div class="section">1</div>
<div class="section">2</div>
<div class="section">3</div>
<div class="section">4</div>
</div> 

4. 전체 페이지를 구성하려면 js

$(document).ready(function() {
$('#fullpage').fullpage({
paddingTop: '50px',
anchors:['firstPage', 'secondPage', 'thirdPage','fourthPage'],
menu: '#myMenu'});
}); 

제가 구성한 내용은 아래와 같습니다. 첫 번째 paddingTop: '50px'는 고정 네비게이션 바를 위한 공간을 만드는 것입니다

두 번째 항목: 앵커, 이는 스크롤 페이지의 앵커 포인트를 순서대로 설정하는 것입니다. 이는 탐색 모음에 있는 li 태그의 data-menuanchor 속성과 a의 href 속성과 일치해야 합니다.

3조: 위의 네비게이션 바인 바인딩 메뉴입니다.

더 많은 구성 항목은 여기를 참조하세요: https://github.com/Niefee/My-study-records/blob/master/2016/1/2016%E5%B9%B41%E6%9C %8818 %E6%97%A5.markdown

5. 액티브 스타일 스타일 추가

이렇게 하면 전체페이지가 구성되지만 페이지에 따라 탐색바 스타일을 변경할 수는 없습니다. 먼저 콘솔을 확인해 보겠습니다

페이지가 스크롤되면 fullpage.js가 메뉴의 해당 항목에 활성 클래스를 추가합니다. 활성 클래스의 배경색을 변경하는 CSS 스타일을 추가하는 것은 쉽습니다.
.active{배경색: #609F98;}

이렇게 하면 모든 효과가 구현됩니다

PS: 잠재적인 작은 버그입니다. fullpage는 현재 스크롤 페이지에 활성 클래스도 추가하므로 이 CSS 스타일이 페이지의 배경 색상에 영향을 미치게 됩니다(다행히 제가 사용한 배경 이미지는 영향을 받지 않습니다. 저처럼 ㅎㅎ) 해결하고 싶다면 섹션 클래스에 배경색을 추가하고 !important를 추가하면 될 것 같습니다.

자, 위치 지정 네비게이션 바를 구현하는 Fullpage.js 고정 네비게이션 바에 대한 내용은 여기까지입니다. 도움이 되셨으면 좋겠습니다!