jQuery によって実装されたスティッキースクロールナビゲーションバー効果-jsチュートリアル-php.cn

jQuery によって実装されたスティッキースクロールナビゲーションバー効果

小云云

リリース： 2018-01-09 10:26:09

オリジナル

2466 人が閲覧しました

スティッキースクロールとは、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 によって実装されたスティッキースクロールナビゲーションバー効果