00秃头小宝贝 2023-09-16 13:53 采纳率: 0%
浏览 2

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

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

  • 写回答

1条回答 默认 最新

  • 专家-赤兔[在线] 全栈领域优质创作者 2023-09-16 19:05
    关注

    引用 皆我百晓生 小程序回复内容作答：
    以下是一个基于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代码，你可以实现类似京东移动网站上的纵向滚动导航栏，并且点击导航链接后实现导航栏向上滑动的效果。

    评论

报告相同问题？

问题事件

  • 创建了问题 9月16日

悬赏问题

  • ¥15 剑网三内存脚本有没有作者可以做
  • ¥15 c#转安卓 java html
  • ¥15 os.listdir文件路径找不到
  • ¥15 使用gojs3.0，如何在nodeDataArray设置好text的位置，再go.TextBlock alignment中进行相应的改变
  • ¥15 psfusion图像融合指标很低
  • ¥15 银河麒麟linux系统如何修改/etc/hosts权限为777
  • ¥50 医院HIS系统代码、逻辑学习
  • ¥30 docker离线安装mysql报错，如何解决？
  • ¥15 构建工单的总账影响在哪里查询或修改
  • ¥15 三个简单项目写完之后有重赏之后联系我