HTML、CSS、jQueryを使用してスティッキートップナビゲーションを作成する方法-jsチュートリアル-php.cn

HTML、CSS、jQueryを使用してスティッキートップナビゲーションを作成する方法

WBOY

リリース： 2023-10-24 08:37:52

オリジナル

916 人が閲覧しました

HTML、CSS、jQueryを使用してスティッキートップナビゲーションを作成する方法

HTML、CSS、jQuery を使用してスティッキートップナビゲーションを作成する方法

前書き:
Web 開発において、便利なトップナビゲーションバーはユーザーエクスペリエンスとユーザーエクスペリエンスを向上させることができます。ユーザーが Web サイトの他のページに簡単にアクセスできるようにします。この記事では、HTML、CSS、jQuery を使用して固定トップナビゲーションバーを作成し、Web サイトのユーザーエクスペリエンスを向上させる方法を説明します。

HTML 構造:
最初のステップでは、トップナビゲーションバーを収容する基本的な HTML 構造を作成する必要があります。次のコードを HTML ファイルに追加します。

<!DOCTYPE html>
<html>
<head>
  <title>粘性顶部导航栏</title>
  <link rel="stylesheet" type="text/css" href="styles.css">
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div class="navbar">
    <a href="#home">首页</a>
    <a href="#about">关于我们</a>
    <a href="#services">服务</a>
    <a href="#contact">联系方式</a>
  </div>
  
  <!-- 页面内容... -->
  
</body>
</html>

ログイン後にコピー

CSS style:
2 番目のステップでは、CSS スタイルを使用して、上部ナビゲーションバーの外観と動作を定義する必要があります。次のコードを CSS ファイルに追加します。

body {
  margin: 0;
  padding-top: 50px; /* 给顶部导航栏留出空间 */
}

.navbar {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 15px;
  display: flex;
  justify-content: space-around;
}

.navbar a {
  color: #fff;
  text-decoration: none;
  padding: 10px;
}

.navbar a:hover {
  background-color: #555;
}

ログイン後にコピー

jQuery スクリプト:
3 番目のステップでは、jQuery を使用して、上部ナビゲーションバーのスティッキー効果とスムーズなスクロール遷移を実現する必要があります。次のコードを script.js ファイルに追加します:

$(document).ready(function() {
  // 检测页面滚动事件
  $(window).scroll(function() {
    // 检测垂直滚动距离
    if ($(this).scrollTop() > 50) {
      // 添加固定样式
      $('.navbar').addClass('sticky');
    } else {
      // 移除固定样式
      $('.navbar').removeClass('sticky');
    }
  });
});

ログイン後にコピー

追加の CSS スタイル:
次の CSS スタイルをstyles.css に追加する必要があります:

.sticky {
  position: fixed;
  top: 0;
  animation: slideDown 0.5s ease;
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

ログイン後にコピー

これで、成功しました。スティッキートップナビゲーションバーを作成しました。ユーザーがページを下にスクロールすると、ナビゲーションバーはページの上部に固定されたままとなり、スクロールプロセス中も表示されたままになります。ページの先頭に戻ると、ナビゲーションバーは元の状態に戻ります。

概要:
この記事では、HTML、CSS、および jQuery を使用してスティッキートップナビゲーションバーを作成し、具体的なコード例を示します。便利なトップナビゲーションバーは、Web サイトユーザーに利便性と優れたユーザーエクスペリエンスを提供します。この記事が、Web 開発で美しいトップナビゲーションバーを作成するのに役立つことを願っています。

以上がHTML、CSS、jQueryを使用してスティッキートップナビゲーションを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。