前端实现类似京东移动网站上的纵向滚动导航栏并且点击实现导航栏向上滑动效果

前端实现类似京东移动网站上的纵向滚动导航栏并且点击实现导航栏向上滑动效果完整案例

引用皆我百晓生小程序回复内容作答：
以下是一个基于HTML、CSS和JavaScript的完整案例，实现了类似京东移动网站上的纵向滚动导航栏，并且点击导航栏后实现导航栏向上滑动的效果。

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vertical Scroll Navbar</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <nav class="navbar">
    <ul>
      <li class="active">Home</li>
      <li>About</li>
      <li>Services</li>
      <li>Products</li>
      <li>Contact</li>
    </ul>
  </nav>

  <div class="content">
    <h1>Welcome to our website</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod suscipit velit, eu tincidunt purus commodo id. Integer lobortis malesuada sem, nec imperdiet justo imperdiet id. Integer tincidunt bibendum sapien id tincidunt. Nunc iaculis volutpat nibh vel molestie.</p>

    <!-- More content here -->
  </div>

  <script src="script.js"></script>
</body>
</html>

CSS代码（style.css）：

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
}

.navbar ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
}

.navbar li {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.navbar li.active {
  background-color: #555;
}

.content {
  margin-top: 60px;
  padding: 20px;
}

h1 {
  color: #333;
  font-size: 24px;
  margin-bottom: 10px;
}

p {
  color: #666;
  font-size: 16px;
}

JavaScript代码（script.js）：

window.addEventListener('DOMContentLoaded', function() {
  var navbar = document.querySelector('.navbar');
  var navbarHeight = navbar.offsetHeight;

  var sections = document.querySelectorAll('section');

  window.addEventListener('scroll', function() {
    var currentPosition = window.pageYOffset;

    sections.forEach(function(section, index) {
      var sectionTop = section.offsetTop - navbarHeight;
      var sectionBottom = sectionTop + section.offsetHeight;

      if (currentPosition >= sectionTop && currentPosition < sectionBottom) {
        var navbarItems = navbar.querySelectorAll('li');

        navbarItems.forEach(function(item, i) {
          item.classList.remove('active');

          if (i === index) {
            item.classList.add('active');
          }
        });
      }
    });
  });

  var navbarItems = navbar.querySelectorAll('li');

  navbarItems.forEach(function(item) {
    item.addEventListener('click', function() {
      var sectionIndex = Array.from(navbarItems).indexOf(item);
      var section = sections[sectionIndex];
      var sectionTop = section.offsetTop - navbarHeight;

      window.scrollTo({
        top: sectionTop,
        behavior: 'smooth'
      });
    });
  });
});

这个案例包含了一个固定在页面顶部的导航栏（.navbar），导航栏中有一个包含项目的无序列表（ul）作为导航链接。页面内容（.content）部分包含了一些示例文本。

在JavaScript代码中，首先监听 DOMContentLoaded 事件，以确保当页面加载完毕后再运行相应的代码。然后获取导航栏的高度，并获取页面的各个部分（section）。

通过监听 scroll 事件，判断当前滚动条位置与各个部分的位置关系，从而确定当前所处的部分，并将相应的导航链接设置为活动状态。

点击导航链接时，获取对应部分的位置，并使用 window.scrollTo 方法平滑滚动到该位置。

通过以上HTML、CSS和JavaScript代码，你可以实现类似京东移动网站上的纵向滚动导航栏，并且点击导航链接后实现导航栏向上滑动的效果。