Comment créer une navigation supérieure collante en utilisant HTML, CSS et jQuery-js tutoriel-php.cn

Comment créer une navigation supérieure collante en utilisant HTML, CSS et jQuery

WBOY

Libérer： 2023-10-24 08:37:52

original

853 Les gens l'ont consulté

Comment créer une navigation supérieure collante en utilisant HTML, CSS et jQuery

Préface :
Dans le développement Web, une barre de navigation supérieure utile peut améliorer l'expérience utilisateur et fournir aux utilisateurs un accès rapide à d'autres pages du site Web. Cet article vous apprendra à utiliser HTML, CSS et jQuery pour créer une barre de navigation supérieure collante afin de vous aider à améliorer l'expérience utilisateur de votre site Web.

Structure HTML :
Première étape, nous devons créer une structure HTML de base pour héberger notre barre de navigation supérieure. Ajoutez le code suivant à votre fichier 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>

Copier après la connexion

Styles CSS :
Dans la deuxième étape, nous devons utiliser les styles CSS pour définir l'apparence et le comportement de la barre de navigation supérieure. Ajoutez le code suivant à votre fichier 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;
}

Copier après la connexion

Script jQuery :
Dans la troisième étape, nous devons utiliser jQuery pour obtenir l'effet collant et la transition de défilement fluide de la barre de navigation supérieure. Ajoutez le code suivant dans votre fichier script.js :

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

Copier après la connexion

Styles CSS joints :
Vous devez ajouter les styles CSS suivants dans styles.css :

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

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

Copier après la connexion

Maintenant, vous avez créé avec succès une barre de navigation supérieure collante. Lorsque l'utilisateur fait défiler la page, la barre de navigation reste fixe en haut de la page et reste visible pendant le processus de défilement. En revenant en haut de la page, la barre de navigation reviendra à son état d'origine.

Résumé :
Cet article utilise HTML, CSS et jQuery pour créer une barre de navigation supérieure collante et fournit des exemples de code spécifiques. Une barre de navigation supérieure utile peut offrir aux utilisateurs du site Web une commodité et une bonne expérience utilisateur. J'espère que cet article pourra vous aider à créer une belle barre de navigation supérieure dans le développement Web.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!