Fullpage.js kemahiran navigasi bar_javascript penetapan kedudukan tetap bar navigasi

FullPage.js ialah pemalam yang ringkas dan mudah digunakan untuk mencipta tapak web skrol skrin penuh (juga dikenali sebagai tapak web satu halaman). Selain mencipta kesan menatal skrin penuh, anda juga boleh menambah beberapa kesan peluncur mendatar pada tapak web anda. Keupayaan untuk menyesuaikan diri dengan saiz skrin yang berbeza, termasuk tablet dan peranti mudah alih.

Saya mula membuat resume saya sendiri, saya memutuskan untuk menggunakan bar navigasi tetap dan merancang untuk menggunakan fullpage.js untuk menatal skrin penuh.

Selepas membaca dokumen halaman penuh dengan teliti, saya mendapati bahawa kesan berikut boleh dicapai tanpa menulis kod js tambahan:

1. Apabila menatal melalui halaman, bar navigasi akan secara automatik mencari label halaman ini

2. Sudah tentu, apabila anda mengklik pada label, anda akan menatal ke halaman itu dan bukannya melompat terus.

1. Kerja penyediaan mestilah mengimport fullpage.js terlebih dahulu; Tapak web rasmi ialah
https://github.com/alvarotrigo/fullPage.js

Fullpage adalah berdasarkan jquery, jadi ingat untuk mengimport jquery.

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

2. Struktur bar navigasi

Struktur bar navigasi di atas adalah seperti berikut Data-menuanchor diperlukan oleh halaman penuh dan atribut href bagi nota juga mesti mempunyai nilai yang sepadan.

<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> 

3. Struktur halaman skrol adalah sangat mudah, seperti berikut

<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. Untuk mengkonfigurasi halaman penuh, js

Kandungan konfigurasi saya adalah seperti yang ditunjukkan di bawah PaddingTop pertama: '50px' adalah untuk memberi ruang untuk bar navigasi tetap

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

.

Item kedua: sauh, ini adalah untuk menetapkan titik sauh untuk halaman tatal dalam urutan Ambil perhatian bahawa ini perlu sepadan dengan atribut menuanchor data bagi teg li dalam bar navigasi dan atribut href a.

Perkara 3: Ia ialah menu pengikat, iaitu bar navigasi di atas.

Untuk lebih banyak item konfigurasi, sila rujuk di sini:
https://github.com/Niefee/My-study-records/blob/master/2016/1/2016%E5%B9%B41%E6%9C %8818 %E6%97%A5.markdown

5. Tambah gaya gaya aktif

Dengan cara ini, halaman penuh dikonfigurasikan, tetapi gaya bar navigasi tidak boleh diubah mengikut halaman Mari kita semak konsol dahulu

Apabila halaman menatal, fullpage.js akan menambah kelas aktif pada item yang sepadan dalam menu Ini adalah mudah. ​​Kami menambah gaya css untuk menukar warna latar belakang kelas aktif .aktif{warna-latar: #609F98;}

Dengan cara ini, semua kesan dapat direalisasikan

PS: Potensi pepijat kecil, kerana halaman penuh juga akan menambah kelas aktif pada halaman skrol semasa, yang bermaksud bahawa gaya css ini akan mempengaruhi warna latar belakang halaman (nasib baik, imej latar belakang yang saya gunakan tidak terjejas, pintar Seperti saya, haha), saya rasa jika anda ingin menyelesaikannya, anda mungkin perlu menambah warna latar belakang pada kelas bahagian dan menambah !penting.

Baiklah, itu sahaja untuk semua orang tentang bar navigasi tetap Fullpage.js-melaksanakan bar navigasi kedudukan saya harap ia akan membantu anda!