How to make a responsive scroll navigation using HTML, CSS and jQuery-JS Tutorial-php.cn

How to make a responsive scroll navigation using HTML, CSS and jQuery

WBOY

Release： 2023-10-24 10:18:53

Original

1288 people have browsed it

How to make a responsive scroll navigation using HTML, CSS and jQuery

How to use HTML, CSS and jQuery to create a responsive scrolling navigation

The navigation menu plays a very important role in web design, it can help users quickly Locate and navigate to different web page sections. For responsive websites, we need to ensure that the navigation menu can display and operate normally on different screen sizes. This article will introduce how to use HTML, CSS and jQuery to make a responsive scroll navigation, and provide detailed code examples.

1. HTML structure

First, we need to define the HTML structure of the navigation menu. Create a navigation menu list within a container element and set corresponding anchor points for each navigation menu item to achieve a smooth scrolling effect inside the page. The sample HTML code is as follows:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>响应式滚动导航</title>
  <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
  <div class="container">
    <ul class="navigation">
      <li><a href="#section1">Section 1</a></li>
      <li><a href="#section2">Section 2</a></li>
      <li><a href="#section3">Section 3</a></li>
      <li><a href="#section4">Section 4</a></li>
    </ul>
  </div>
  <div id="section1">
    <!-- 第一部分内容 -->
  </div>
  <div id="section2">
    <!-- 第二部分内容 -->
  </div>
  <div id="section3">
    <!-- 第三部分内容 -->
  </div>
  <div id="section4">
    <!-- 第四部分内容 -->
  </div>
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Copy after login

Note that we have introduced an external CSS style file style.css and an external JavaScript file script.js.

2. CSS Style

Next, we need to set the style of the navigation menu and its layout under different screen sizes. The sample CSS style code is as follows:

.container {
  width: 100%;
  background-color: #f0f0f0;
  position: fixed;
  top: 0;
  z-index: 999;
}

.navigation {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.navigation li {
  float: left;
}

.navigation li a {
  display: block;
  color: #000;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navigation li a:hover {
  background-color: #ddd;
}

#section1,
#section2,
#section3,
#section4 {
  height: 100vh;
}

@media (max-width: 600px) {
  .navigation li {
    float: none;
  }
}

Copy after login

3. jQuery script

Finally, we use jQuery to write code to achieve the effect of scrolling navigation. The sample jQuery script code is as follows:

$(document).ready(function() {
  $('.navigation a').on('click', function(event) {
    event.preventDefault();
    
    // 获取目标锚点元素的位置
    var target = $(this.hash);
    var targetPosition = target.offset().top;
    
    // 平滑滚动到目标位置
    $('html, body').animate({
      scrollTop: targetPosition
    }, 800);
  });

  $(window).scroll(function() {
    // 获取当前滚动位置
    var scrollPosition = $(window).scrollTop();
    
    // 高亮显示当前所在的导航菜单项
    $('.navigation a').each(function() {
      var currentLink = $(this);
      var targetSection = $(currentLink.attr('href'));
      var targetSectionTop = targetSection.offset().top;
      var targetSectionBottom = targetSectionTop + targetSection.outerHeight();
      
      if (scrollPosition >= targetSectionTop && scrollPosition < targetSectionBottom) {
        currentLink.addClass('active');
      } else {
        currentLink.removeClass('active');
      }
    });
  });
});

Copy after login

In the above code, we did the following:

When a link in the navigation menu is clicked, prevent the default link jump behavior , and smoothly scroll to the corresponding anchor point position.
As the page scrolls, the corresponding navigation menu items are highlighted based on the current scroll position.

In order to keep the current navigation menu item highlighted during scrolling, we also define an .active class in the CSS style. You can style the .active class as needed.

The above is a detailed code example of how to use HTML, CSS and jQuery to create a responsive scroll navigation. You can modify and optimize it according to your needs to suit different designs and layouts. Hope this article is helpful to you!

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