Fullpage. js fixed navigation bar-implemented positioning navigation bar, fullpage. js navigation bar

Fullpage. js fixed navigation bar-implemented positioning navigation bar, fullpage. js navigation bar

FullPage. js is a simple and easy-to-use plug-in for creating full-screen scrolling websites (also known as single-page websites ). In addition to creating full-screen scrolling effects, you can also add some horizontal slider effects to the website. The ability to adapt to different screen sizes, including tablets and mobile devices.

I started to prepare my resume. I decided to use the fixed navigation bar and planned to use fullpage. js for full screen scrolling.

After carefully reading the fullpage document, we found that the following effects can be achieved without writing js Code:

1. When you scroll through the page, the tab on this page is automatically located in the navigation bar.

2. Of course, when you click a tag, it will scroll to that page rather than jump directly.

I. Preparations must first be performed in fullpage. js;

Official website is 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 is based on jquery, so remember to import jquery.

Ii. navigation bar structure

<Ul id = "myMenu"> <li data-menuanchor = "firstPage" class = "menuList"> <a href = "# firstPage"> homepage </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 Information </a> </li> </ul>

The structure of the above navigation bar is as follows. The data-menuanchor is required by fullpage, And the href attribute of the signature must also correspond to the value.

3. The structure of the rolling page is very simple, as shown below:

<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. Configure fullpage and js

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

My configuration content, the first paddingTop: '50px ', is to free up space for the fixed navigation bar

Article 2: anchors. This is to set the anchors for the scroll page in sequence. Note that the anchor attribute must correspond to the data-menuanchor attribute of the li label in the navigation bar and the href attribute of.

Article 3: bind the menu, that is, the navigation bar above.

For more configuration items, refer to here: https://github.com/Niefee/My-study-records/blob/master/2016/1/2016%E5%B9%B41%E6%9C%8818%E6%97%A5.markdown

5. Add an active style

In this way, fullpage is configured, but the style of the navigation bar cannot be changed. Let's check the console first.

When the page is scrolling, fullpage. js will add an active class to the corresponding item in the menu. This makes it easy to add a css style and change the background color for the active class.
. Active {background-color: #609F98 ;}

In this way, all the results will be achieved.

PS: potential small bug. Because fullpage will also add an active class to the current rolling page, this css style will affect the background color of the page (fortunately, I used the background image, don't be affected, wit is like me, haha). I guess if you want to solve it, you may need to add background color and background color to the section class! Important.

Now, we will introduce you to the fixed navigation bar of Fullpage. js-implement positioning navigation bar and hope to help you!