Maison > Article > interface Web > Comment créer une navigation supérieure collante en utilisant HTML, CSS et jQuery

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

WBOYoriginal: 2023-10-24 08:37:52830parcourir

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>

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

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

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

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!

jquery css html JS

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：HTML, CSS et jQuery : créer une fonction d'actualisation déroulanteArticle suivant：HTML, CSS et jQuery : créer une fonction d'actualisation déroulante

Articles Liés

Voir plus