基于jquery实现页面滚动时顶部导航显示隐藏

针对“基于jquery实现页面滚动时顶部导航显示隐藏”的问题，以下为完整攻略：

一、技术概述

实现页面滚动时顶部导航显示隐藏，需要用到jQuery以及操作CSS样式的知识。主要的思路是监听页面滚动事件，并根据滚动位置动态修改导航栏的CSS样式。

二、实现步骤

1. 使用jQuery绑定一个滚动事件，监听页面滚动，代码如下：

$(window).scroll(function() {
    // 滚动事件触发时的操作
});

1. 在滚动事件回调函数中获取当前滚动位置，代码如下：

var scrollTop = $(window).scrollTop();

1. 根据滚动位置判断导航栏是否需要显示，即是否滚动到了一定高度。一般情况下，当滚动位置大于导航栏所在元素的top值时就显示导航栏。代码如下：

if (scrollTop >= $('.nav-container').offset().top) { // 这里假设.nav-container是导航栏所在的元素
    $('.nav-container').addClass('fixed-nav'); // 添加fixed-nav样式
} else {
    $('.nav-container').removeClass('fixed-nav'); // 移除fixed-nav样式
}

1. 为导航栏添加相应的CSS样式，使其在滚动位置到达一定高度后固定在页面顶部。CSS样式可以根据实际需求进行调整，下面是一个示例：

.fixed-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    z-index: 9999;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

三、示例说明

示例一

假设我们有一个网页，在头部有一个导航栏，初始状态是隐藏的。当用户下拉滚动条时，导航栏逐渐显示，直到到达指定高度后固定在页面顶部，代码如下：

HTML结构如下：

<div class="nav-container">
  <ul>
    <li><a href="#">导航1</a></li>
    <li><a href="#">导航2</a></li>
    <li><a href="#">导航3</a></li>
  </ul>
</div>

JavaScript代码如下:

$(window).scroll(function () {
  var scrollTop = $(window).scrollTop();
  if (scrollTop >= $('.nav-container').offset().top) {
    $('.nav-container').addClass('fixed-nav');
  } else {
    $('.nav-container').removeClass('fixed-nav');
  }
});

CSS样式如下:

.nav-container {
  display: none;
  position: relative;
  z-index: 999;
}
.fixed-nav {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

示例二

假设我们有一个长页面，在页面的不同位置有多个导航栏，当用户下拉滚动条时，导航栏逐渐显示，直到到达指定高度后固定在页面顶部，同时只有当前显示的导航栏才会固定在页面顶部，其他导航栏保持初始状态，代码如下：

HTML结构如下：

<div class="nav-container" id="nav-1">
  <ul>
    <li><a href="#">导航1-1</a></li>
    <li><a href="#">导航1-2</a></li>
    <li><a href="#">导航1-3</a></li>
  </ul>
</div>
<div class="nav-container" id="nav-2">
  <ul>
    <li><a href="#">导航2-1</a></li>
    <li><a href="#">导航2-2</a></li>
    <li><a href="#">导航2-3</a></li>
  </ul>
</div>
<div class="nav-container" id="nav-3">
  <ul>
    <li><a href="#">导航3-1</a></li>
    <li><a href="#">导航3-2</a></li>
    <li><a href="#">导航3-3</a></li>
  </ul>
</div>

JavaScript代码如下:

$(window).scroll(function () {
  var scrollTop = $(window).scrollTop();
  $('.nav-container').each(function() { // 遍历所有导航栏
    var $nav = $(this),
        navTop = $nav.offset().top;
    if(scrollTop >= navTop) {
      $('.nav-container').removeClass('fixed-nav'); // 移除所有导航栏的fixed-nav样式
      $nav.addClass('fixed-nav'); // 为当前导航栏添加fixed-nav样式
    } else {
      $nav.removeClass('fixed-nav');
    }
  });
});

CSS样式如下：

.nav-container {
  display: block;
  position: relative;
  z-index: 999;
}
.fixed-nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}