1. Python技术站首页
  2. 其他
  3. Java

jQuery 导航自动跟随滚动的实现代码

• Java

jQuery 导航自动跟随滚动是一种常见的页面交互效果，它可以使页面导航栏在用户滚动页面时自动跟随滚动并保持固定位置。下面是实现这个效果的详细攻略：

1.添加导航栏

首先，在 HTML 文件中添加一个导航栏，通常是一个 ul 列表，其中包含若干个 li 子项。

<nav>
  <ul>
    <li><a href="#section1">Section1</a></li>
    <li><a href="#section2">Section2</a></li>
    <li><a href="#section3">Section3</a></li>
  </ul>
</nav>

2.为导航栏添加样式

为导航栏添加样式，使其具有固定位置和样式。

nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #FFF;
  box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
  z-index: 100;
}
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 50px;
}
nav li {
  margin: 0;
  padding: 0;
}
nav a {
  display: block;
  line-height: 50px;
  padding: 0 15px;
  color: #333;
}

3.监听页面滚动事件

使用 jQuery 监听页面滚动事件，当页面滚动时，计算当前滚动位置所在的页面区域，并将对应的导航项添加 .active 样式。

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();
  var scrollHeight = $(document).height();
  var windowHeight = $(this).height();
  $('nav a').each(function() {
    var href = $(this).attr('href');
    var targetTop = $(href).offset().top;
    var targetHeight = $(href).height();
    if (scrollTop >= targetTop && scrollTop < targetTop + targetHeight) {
      $(this).addClass('active');
    } else {
      $(this).removeClass('active');
    }
  });
});

4.添加动画效果

使用 jQuery 的 .animate() 方法为导航栏添加动画效果，使其在滚动时平滑过渡。

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();
  var scrollHeight = $(document).height();
  var windowHeight = $(this).height();
  $('nav a').each(function() {
    var href = $(this).attr('href');
    var targetTop = $(href).offset().top;
    var targetHeight = $(href).height();
    if (scrollTop >= targetTop && scrollTop < targetTop + targetHeight) {
      $(this).addClass('active');
    } else {
      $(this).removeClass('active');
    }
  });
  $('nav').stop().animate({top: scrollTop}, 500);
});

示例说明

示例一：简单的单页网站

在这个示例中，我们使用上面的攻略实现了一个简单的单页网站，网站包含三个部分，每个部分都是一个 div 元素，用于演示导航栏跟随滚动的效果。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery 导航自动跟随滚动示例一</title>
  <style>
    nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #FFF;
      box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
      z-index: 100;
    }
    nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
    }
    nav li {
      margin: 0;
      padding: 0;
    }
    nav a {
      display: block;
      line-height: 50px;
      padding: 0 15px;
      color: #333;
    }
    #section1 {
      height: 500px;
      background-color: #EEE;
    }
    #section2 {
      height: 500px;
      background-color: #DDD;
    }
    #section3 {
      height: 500px;
      background-color: #CCC;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#section1">Section1</a></li>
      <li><a href="#section2">Section2</a></li>
      <li><a href="#section3">Section3</a></li>
    </ul>
  </nav>
  <div id="section1">Section1</div>
  <div id="section2">Section2</div>
  <div id="section3">Section3</div>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(window).scroll(function() {
      var scrollTop = $(this).scrollTop();
      var scrollHeight = $(document).height();
      var windowHeight = $(this).height();
      $('nav a').each(function() {
        var href = $(this).attr('href');
        var targetTop = $(href).offset().top;
        var targetHeight = $(href).height();
        if (scrollTop >= targetTop && scrollTop < targetTop + targetHeight) {
          $(this).addClass('active');
        } else {
          $(this).removeClass('active');
        }
      });
      $('nav').stop().animate({top: scrollTop}, 500);
    });
  </script>
</body>
</html>

示例二：带有子菜单的导航栏

在这个示例中，我们对导航栏进行了扩展，添加了子菜单，并对攻略进行了适当的修改，使其可以处理子菜单，并且在滚动到子菜单区域时高亮其父菜单。

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery 导航自动跟随滚动示例二</title>
  <style>
    nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      background-color: #FFF;
      box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
      z-index: 100;
    }
    nav ul {
      margin: 0;
      padding: 0;
      list-style: none;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 50px;
    }
    nav li {
      margin: 0;
      padding: 0;
      position: relative;
    }
    nav a {
      display: block;
      line-height: 50px;
      padding: 0 15px;
      color: #333;
    }
    nav ul ul {
      position: absolute;
      top: 100%;
      left: 0;
      background-color: #FFF;
      box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.2);
      z-index: 200;
      display: none;
    }
    nav ul li:hover ul {
      display: block;
    }
    nav ul ul li {
      width: 200px;
      border-bottom: 1px solid #DDD;
    }
    nav ul ul li:last-child {
      border-bottom: none;
    }
    nav ul ul a {
      line-height: 30px;
      padding: 0 15px;
    }
    nav ul ul ul {
      left: 100%;
      top: 0;
      padding-left: 10px;
    }
    nav ul ul li:hover > a {
      background-color: #EEE;
    }
    nav a.active {
      background-color: #EEE;
    }
  </style>
</head>
<body>
  <nav>
    <ul>
      <li><a href="#section1">Section1</a></li>
      <li>
        <a href="#">Section2</a>
        <ul>
          <li><a href="#section2-1">Section2-1</a></li>
          <li>
            <a href="#">Section2-2</a>
            <ul>
              <li><a href="#section2-2-1">Section2-2-1</a></li>
              <li><a href="#section2-2-2">Section2-2-2</a></li>
            </ul>
          </li>
          <li><a href="#section2-3">Section2-3</a></li>
        </ul>
      </li>
      <li><a href="#section3">Section3</a></li>
    </ul>
  </nav>
  <div id="section1">Section1</div>
  <div id="section2">
    <h2>Section2</h2>
    <div id="section2-1">Section2-1</div>
    <div id="section2-2">
      <h3>Section2-2</h3>
      <div id="section2-2-1">Section2-2-1</div>
      <div id="section2-2-2">Section2-2-2</div>
    </div>
    <div id="section2-3">Section2-3</div>
  </div>
  <div id="section3">Section3</div>
  <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
  <script>
    $(window).scroll(function() {
      var scrollTop = $(this).scrollTop();
      var scrollHeight = $(document).height();
      var windowHeight = $(this).height();
      $('nav a').each(function() {
        var href = $(this).attr('href');
        var targetTop = $(href).offset().top;
        var targetHeight = $(href).height();
        if (scrollTop >= targetTop && scrollTop < targetTop + targetHeight) {
          $(this).addClass('active');
          $(this).parents('li').children('a').addClass('active');
          $(this).parents('li').parents('ul').children('li').children('a').not($(this).parents('li').children('a')).removeClass('active');
        } else {
          $(this).removeClass('active');
        }
      });
      $('nav').stop().animate({top: scrollTop}, 500);
    });
  </script>
</body>
</html>

通过对这两个示例的对比，我们可以看到，在网站中添加导航自动跟随滚动效果不仅可以提升用户体验，还可以改善网站的整体风格和设计。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：jQuery 导航自动跟随滚动的实现代码 - Python技术站

赞 (0)
0 0 打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023年6月15日
下一篇 2023年6月15日

相关文章

  • SpringBoot内置数据源的持久化与解决方案

    SpringBoot内置数据源的持久化与解决方案 SpringBoot提供了基于内置数据源的快速开发方式，但在某些情况下我们需要对数据源进行持久化，即在服务重启后仍然可以使用之前的数据源，这就需要对数据源进行持久化操作。本文将详细介绍SpringBoot内置数据源的持久化与解决方案。 SpringBoot内置数据源 SpringBoot内置了三种依赖库支持数…

    Java 2023年5月20日
    00

  • Javassist如何操作Java 字节码

    Javassist是一个强大的Java字节码编辑器，通过它可以操作Java字节码。下面我们将介绍如何使用Javassist操作Java字节码。 1. Javassist基础 1.1 添加Javassist依赖 首先需要在项目中添加Javassist依赖，这里以Maven项目为例，在pom.xml文件中添加以下依赖信息： <dependency> …

    Java 2023年5月26日
    00

  • Java去除字符串中空格的方法详解

    Java去除字符串中空格的方法详解 在 Java 中，去除字符串中的空格是一个很常见的需求。本文将详细讲解如何实现去除字符串中空格的多种方法。 1. 使用replaceAll方法 replaceAll 方法是 String 类提供的方法，它可以将字符串中的一个字符或一组字符全部替换成另一个字符或一组字符。我们可以利用它来去除字符串中的空格。 下面是一个示例代…

    Java 2023年5月26日
    00

  • 老生常谈java数组中的常见异常

    讲解“老生常谈java数组中的常见异常”的完整攻略，可以按照以下步骤进行： 1. 数组越界异常(ArrayIndexOutOfBoundsException) 这个异常是在数组下标超过数组的长度时发生的异常，下标从0开始，数组长度是从1开始，因此我们需要通过下标加减一来判断是否存在这个下标。 int[] array = {1, 2, 3, 4, 5}; in…

    Java 2023年5月26日
    00

  • Java实现深度优先搜索(DFS)和广度优先搜索(BFS)算法

    Java实现深度优先搜索(DFS)和广度优先搜索(BFS)算法 深度优先搜索(DFS)和广度优先搜索(BFS)算法是常用的遍历和搜索算法，具有很高的实用价值。在Java中，我们可以通过使用递归函数和队列这两种数据结构来实现这两种算法。下面将对这两种算法进行详细的讲解。 深度优先搜索(DFS) 深度优先搜索(DFS)是一种常用的遍历算法，其思想就是从起点开始，…

    Java 2023年5月19日
    00

  • 一些实用的TAB效果

    一些实用的TAB效果可以通过CSS和JavaScript实现。下面为您提供详细的攻略和两个示例。 实现步骤 在HTML中创建一个元素，用来包含选项卡切换按钮和内容区域。 在CSS中为选项卡切换按钮和内容区域定义样式。 在JavaScript中编写代码，给每个选项卡按钮添加点击事件，动态切换内容区域的显示。 下面是两个示例： 示例一 该示例实现点击选项卡切换按…

    Java 2023年6月15日
    00

  • java 实现文件夹的拷贝实例代码

    下面我将为你详细讲解java实现文件夹拷贝的完整攻略。攻略的主要步骤有以下几个： 使用 java nio 包中的 Path 类和 Files 类，创建两个 Path 对象，分别表示源文件夹路径和目标文件夹路径； 调用 Files 类的 copy() 方法，将源文件夹及其子文件夹、子文件复制到目标文件夹。 下面分别对这两个步骤进行详细说明。 准备工作 在开始之…

    Java 2023年5月31日
    00

  • Springboot中使用lombok的@Data注解方式

    下面是Springboot中使用lombok的@Data注解方式的完整攻略。 什么是Lombok Lombok是一种能够通过注解生成代码的工具，可以通过少量的注释简化Java类的定义。 在Springboot中，Lombok可以简化一个类中的getter和setter的定义，使得代码更加简洁易读。 在Springboot中使用Lombok的@Data注解 在…

    Java 2023年5月20日
    00
合作推广
合作推广
分享本页
返回顶部