jquery scrollTop方法根据滚动像素显示隐藏顶部导航条

要实现“jquery scrollTop方法根据滚动像素显示隐藏顶部导航条”，我们可以通过以下步骤来实现：

1. 准备HTML结构

在HTML文件中，我们需要准备一个固定的顶部导航栏，例如：

<header class="header">
  <nav class="navbar">
    <!-- 导航条内容 -->
  </nav>
</header>

这里的 .header 元素是顶部导航栏的容器元素，.navbar 元素是具体的导航条内容。需要注意，.header 元素应该设置为 position: fixed; top: 0;，以便固定在页面顶部。

1. 编写CSS样式

为了使顶部导航栏隐藏，我们可以使用CSS样式将其设置为 display: none;。为了在滚动页面时显示它，我们可以为 .header 元素添加一个类，例如 .header--fixed，并为该类添加以下样式：

.header--fixed .navbar {
  /* 导航条固定时的样式 */
}

其中，.navbar { position: fixed; top: 0; } 可以使导航条固定在页面顶部，使得滚动页面时它会一直保持在可见区域内。

1. 编写JavaScript代码

使用jQuery的 scrollTop() 方法可以获取滚动条在垂直方向上滚动的像素数，通过比较滚动像素数与设定的值，我们可以决定何时显示或隐藏顶部导航栏。

$(window).scroll(function() {
  var scrollTop = $(this).scrollTop();
  if ( scrollTop > 200 ) {
    $('.header').addClass('header--fixed');
  } else {
    $('.header').removeClass('header--fixed');
  }
});

这里设定的值是 200，当滚动像素数超过 200 时，需要显示固定的顶部导航栏，反之则隐藏。

下面是两个例子，可以供参考：

示例 1：

该网站的顶部导航栏随着滚动像素数的变化而显示或隐藏。在滚动的同时，也伴随着导航栏的出现和消失。

<header class="header header--fixed">
  <nav class="navbar">
    <!-- 导航条内容 -->
  </nav>
</header>

<script>
$(function() {
  var lastScrollTop = 0;
  $(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    // 当向下滚动并且滚动像素数大于100时，显示导航栏
    if ( scrollTop > lastScrollTop && scrollTop > 100 ) {
      $('.header').addClass('header--show');
      lastScrollTop = scrollTop;
    } else {
      // 否则，隐藏导航栏
      $('.header').removeClass('header--show');
      lastScrollTop = scrollTop;
    }
  });
});
</script>

示例 2：

该网站的顶部导航栏被默认隐藏，只在滚动像素数超过 300 时才显示。当滚动回到页面顶部时，导航栏又会自动隐藏起来。

<header class="header">
  <nav class="navbar">
    <!-- 导航条内容 -->
  </nav>
</header>

<script>
$(function() {
  $(window).scroll(function() {
    var scrollTop = $(this).scrollTop();
    if ( scrollTop > 300 ) {
      $('.header').addClass('header--fixed');
    } else {
      $('.header').removeClass('header--fixed');
    }
  });
});
</script>

<style>
.header {
  display: none;
}

.header--fixed {
  display: block;
  position: fixed;
  top: 0;
}
</style>

这段代码中，我们使用 CSS 样式将 .header 元素默认隐藏，并为 .header--fixed 元素添加了样式，使它固定在页面顶部。在 JavaScript 代码中，我们使用 scrollTop() 方法获取滚动像素数，并将显示或隐藏顶部导航栏的逻辑写在 if...else 语句中。