How to create a sticky top navigation using HTML, CSS and jQuery-JS Tutorial-php.cn

How to create a sticky top navigation using HTML, CSS and jQuery

WBOY

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

Original

881 people have browsed it

How to create a sticky top navigation using HTML, CSS and jQuery

Foreword:
In web development, a useful top navigation bar can improve users experience and provide users with quick access to other pages of the website. This article will teach you how to use HTML, CSS, and jQuery to create a sticky top navigation bar to help you improve the user experience of your website.

HTML Structure:
In the first step, we need to create a basic HTML structure to house our top navigation bar. Add the following code to your HTML file:

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

Copy after login

CSS style:
In the second step, we need to use CSS styles to define the appearance and behavior of the top navigation bar. Add the following code to your CSS file:

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

Copy after login

jQuery script:
In the third step, we need to use jQuery to achieve the sticky effect and smooth scrolling transition of the top navigation bar. Add the following code to your script.js file:

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

Copy after login

Additional CSS styles:
You need to add the following CSS styles to styles.css:

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

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

Copy after login

Now, you have successfully Created a sticky top navigation bar. As the user scrolls down the page, the navigation bar remains fixed at the top of the page and remains visible during the scrolling process. When returning to the top of the page, the navigation bar will return to its original state.

Summary:
This article uses HTML, CSS and jQuery to create a sticky top navigation bar and provides specific code examples. A useful top navigation bar can provide website users with convenience and a good user experience. I hope this article can help you create a beautiful top navigation bar in web development.

The above is the detailed content of How to create a sticky top navigation using HTML, CSS and jQuery. For more information, please follow other related articles on the PHP Chinese website!