ホームページ > 記事 > ウェブフロントエンド > jQuery によって実装されたスティッキー スクロール ナビゲーション バー効果
jQuery によって実装されたスティッキー スクロール ナビゲーション バー効果
- 小云云オリジナル
- 2018-01-09 10:26:092450ブラウズ
スティッキー スクロールとは、Web サイト ページの閲覧を便利にする効果を実現するために、スクロール プロセス中にナビゲーションがブラウザーに固定されることです。これはユーザー エクスペリエンスでもあります。この記事では、jQuery プラグを使用して、jQuery によって実装されたスティッキー スクロール ナビゲーション バー効果を主に紹介します。 -in smint 関連する使用方法のスキルが提供されており、必要な読者がダウンロードして参照できるように、サンプルの完全なソース コードが添付されています。これがすべての人に役立つことを願っています。
実装方法を見てみましょう:
jQuery の smint プラグインは、ナビゲーション メニューの固定プラグインでもあります。ページがスクロールすると、ナビゲーション メニューが上部に固定され、メニューをクリックすると、ページが対応する領域までスムーズにスクロールします。
互換性
smintはposition:fixedを使用しているため、IE6とは互換性がありません。適用可能なブラウザ: IE8、360、FireFox、Chrome、Safari、Opera、Maxthon、Sogou、Window of the World。
ファイルの紹介
<link href="css/demo.css" rel="external nofollow" rel="stylesheet" type="text/css"> <script src="js/jquery.min.js"></script> <script src="js/jquery.smint.js"></script>
HTML
<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">
<p class="wrap">
<p class="subMenu">
<p class="inner">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="sTop" class="subNavBtn">Home</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s1" class="subNavBtn">Section 1</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s2" class="subNavBtn">Section 2</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s3" class="subNavBtn">Section 3</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s4" class="subNavBtn">Section 4</a>
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" id="s5" class="subNavBtn end">Section 5</a>
</p>
</p>
<p class="section sTop">
<p class="inner"></p><br class="clear">
</p>
<p class="section s1">
<p class="inner"><h1>Section 1</h1></p>
</p>
<p class="section s2">
<p class="inner"><h1>Section 2</h1></p>
</p>
<p class="section s3">
<p class="inner"><h1>Section 3</h1></p>
</p>
<p class="section s4">
<p class="inner"><h1>Section 4</h1></p>
</p>
<p class="section s5">
<p class="inner"><h1>Section 5</h1></p>
</p>
</p>
</body>
注: メニューの外部コンテナ (メニューのサブメニューなど)上の例) は、position:absolute のスタイルにする必要があり、各メニューのラベルには ID を設定する必要があります。ID の値は、以下の対応する領域のクラスの値と一致する必要があります。
JavaScript
$(function() {
$('.subMenu').smint({
scrollSpeed : 1000
});
});
関連する推奨事項:
クリック後にナビゲーションバーのヘッダーメニュー項目の色を変更するメソッドのjQuery実装効果のサンプルコード
以上がjQuery によって実装されたスティッキー スクロール ナビゲーション バー効果の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。