Cara membuat navigasi atas melekit menggunakan HTML, CSS dan jQuery-tutorial js-php.cn

Cara membuat navigasi atas melekit menggunakan HTML, CSS dan jQuery

WBOY

Lepaskan： 2023-10-24 08:37:52

asal

916 orang telah melayarinya

Cara membuat navigasi atas melekit menggunakan HTML, CSS dan jQuery

Prakata:
Dalam pembangunan web, bar navigasi teratas yang berguna boleh meningkatkan pengalaman pengguna dan memberikan pengguna akses pantas ke halaman lain tapak web. Artikel ini akan mengajar anda cara menggunakan HTML, CSS dan jQuery untuk mencipta bar navigasi atas melekit untuk membantu anda meningkatkan pengalaman pengguna tapak web anda.

Struktur HTML:
Langkah pertama, kita perlu mencipta struktur HTML asas untuk menempatkan bar navigasi teratas kita. Tambahkan kod berikut pada fail HTML anda:

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

Salin selepas log masuk

Gaya CSS:
Dalam langkah kedua, kita perlu menggunakan gaya CSS untuk menentukan penampilan dan tingkah laku bar navigasi atas. Tambahkan kod berikut pada fail CSS anda:

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

Salin selepas log masuk

Skrip jQuery:
Dalam langkah ketiga, kita perlu menggunakan jQuery untuk mencapai kesan melekit dan peralihan tatal yang lancar pada bar navigasi atas. Tambahkan kod berikut dalam fail script.js anda:

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

Salin selepas log masuk

Gaya CSS yang dilampirkan:
Anda perlu menambah gaya CSS berikut dalam styles.css:

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

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

Salin selepas log masuk

Kini, anda telah berjaya mencipta bar navigasi atas melekit. Apabila pengguna menatal ke bawah halaman, bar navigasi kekal di bahagian atas halaman dan kekal kelihatan semasa proses menatal. Apabila kembali ke bahagian atas halaman, bar navigasi akan kembali ke keadaan asalnya.

Ringkasan:
Artikel ini menggunakan HTML, CSS dan jQuery untuk mencipta bar navigasi atas melekit dan menyediakan contoh kod khusus. Bar navigasi teratas yang berguna boleh memberikan pengguna tapak web kemudahan dan pengalaman pengguna yang baik. Saya harap artikel ini dapat membantu anda mencipta bar navigasi teratas yang cantik dalam pembangunan web.

Atas ialah kandungan terperinci Cara membuat navigasi atas melekit menggunakan HTML, CSS dan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!