Fullpage.js 固定ナビゲーション バー - 位置決めナビゲーションの実装 bar_javascript スキル

FullPage.js は、全画面スクロール Web サイト (シングルページ Web サイトとも呼ばれます) を作成するためのシンプルで使いやすいプラグインです。全画面スクロール効果の作成に加えて、Web サイトに水平スライダー効果を追加することもできます。タブレットやモバイルデバイスなど、さまざまな画面サイズに適応する機能。

私は、固定ナビゲーション バーを使用することに決め、全画面スクロールに fullpage.js を使用することを計画しました。

全ページのドキュメントを注意深く読んだところ、追加の js コードを記述せずに次の効果が達成できることがわかりました。

1. ページをスクロールすると、ナビゲーション バーがこのページのラベルを自動的に見つけます

2. もちろん、ラベルをクリックすると、直接ジャンプするのではなく、そのページにスクロールします。

1. 最初に fullpage.js をインポートする必要があります。 公式 Web サイトは
https://github.com/alvarotrigo/fullPage.js

フルページは jquery に基づいているため、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. ナビゲーションバーの構造

上記のナビゲーション バーの構造は次のとおりです。フルページでは data-menuanchor が必要であり、メモの href 属性にも対応する値が必要です。

<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. スクロールページの構造は次のように非常にシンプルです

<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

私の設定内容は以下のとおりです。最初のpaddingTop: '50px'は、固定ナビゲーションバー用のスペースを確保するためのものです。

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

2 番目の項目: アンカー。これは、スクロール ページのアンカー ポイントを順番に設定します。これは、ナビゲーション バーの 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.マークダウン

5. アクティブなスタイルの追加

このようにしてフルページが設定されましたが、ページに応じてナビゲーションバーのスタイルを変更することはできません。まずコンソールを確認してみましょう。

ページがスクロールすると、fullpage.js によってアクティブなクラスがメニュー内の対応する項目に追加されます。これは簡単に、アクティブなクラスの背景色を変更する CSS スタイルを追加します。 .active{背景色: #609F98;}

このようにして、すべての効果が実現されます

PS: 小さなバグの可能性があります。フルページは現在のスクロール ページにアクティブ クラスも追加します。これは、この CSS スタイルがページの背景色に影響することを意味します (幸いなことに、私が使用した背景画像は影響を受けません。私と同じように (笑)、これを解決したい場合は、セクション クラスに背景色を追加し、! important を追加する必要があるかもしれません。

これで、Fullpage.js の固定ナビゲーション バー - 位置決めナビゲーション バーの実装については終わりです。お役に立てば幸いです。