Fullpage.js fixed navigation bar-_javascript tips for positioning navigation bar

Fullpage.js is a simple and easy-to-use plug-in used to create full-screen scrolling sites (also known as single-page sites). In addition to creating a full-screen scrolling effect, you can add some horizontal slider effects to your site. Able to adapt to different screen sizes, including tablets and mobile devices.

Start making your own resume, decide to use the fixed navigation bar, and intend to use fullpage.js to do full screen scrolling.

After a careful look at the fullpage document, I found that without additional writing JS code can achieve the following effects:

1. When scrolling page, the navigation bar is automatically positioned to the label of this page

2. Of course, click on the label, but also scroll to that page rather than directly jump.

First, the preparation work must be imported fullpage.js;

The official website is https://github.com/alvarotrigo/fullPage.js

<link rel= "stylesheet" href= "Styles/jquery.fullpage.css" >
<script src= "Scripts/jquery.min.js" > </script>

Fullpage is based on jquery, so remember to import jquery oh.

Second, the navigation bar structure

<ul id= "MyMenu" >
<li data-menuanchor= "FirstPage" class= "menulist" ><a href= "#firstPage" > Home </a></li>
<li data-menuanchor= "secondpage" class= "menulist" ><a href= "#secondPage" > Works </a></li>
<li data-menuanchor= "thirdpage" class= "menulist" ><a href= "#thirdPage" > Skills </a></li>
<li data-menuanchor= "fourthpage" class= "menulist" ><a href= "#fourthPage" > Contact Method </a></li>

The above navigation bar structure is such, where the data-menuanchor is fullpage requirements, a note of the href attribute should also correspond to the value of slightly.

Third, the structure of the scrolling page is very simple, as follows

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

Four, to configure FULLPAGE,JS

$ (document). Ready (function () {
$ (' #fullpage '). Fullpage ({
paddingtop: ' 50px ',
anchors:[' firstpage ', ' Secondpage ', ' thirdpage ', ' fourthpage '],
menu: ' #myMenu '});

My configuration is as follows, the first paddingtop: ' 50px ' to make room for the fixed navigation bar

Second: Anchors, this is to set the anchor point for the scrolling page in turn, and notice that it needs to correspond to the Data-menuanchor attribute of the Li tag in the navigation bar and the href attribute of a.

The third: The Binding menu, which is the navigation bar above.

More Configuration Items reference here: Https://github.com/Niefee/My-study-records/blob/master/2016/1/2016%E5%B9%B41%E6%9C%8818%E6%97%A5.markdown

Increase the style of the active class

In this way, the fullpage is configured, but the style of the navigation bar can not be changed according to the page changes we first look at the console

When the page scrolls, Fullpage.js will add an active class to the corresponding item in the menu, so that we can add a CSS style and change the background color for the active class.
. Active{background-color: #609F98;}

That way, all the effects are realized.

PS: Potential small bugs, because Fullpage will also join the active class on the current scrolling page, meaning that this CSS style will affect the background color of the page (fortunately I use the background image, not affected, wit like me, haha), I guess to solve the words, You might want to add a background color to the section class and add a!important.

OK, about fullpage.js fixed navigation bar-to achieve positioning navigation bar related content to introduce you here, I hope to help you!