Javascript 在向下滚动时隐藏固定标题，在向上滚动时显示，请悬停版本2

我知道以前有人在这里问过这个问题，但我不太喜欢它的脚本编写方式，运行时看起来不稳定

我希望：

用淡出键向下滚动时隐藏标题 使用fadein向上滚动显示标题 悬停显示标题 我决定不展示其他示例中的一些js，因为人们打算处理这些js，但它们没有那么好

希望有人能帮助一定是一个程序员容易

Html:

像这样使用jQuery中的滚动函数-

$document.readyfunction{ var-iScrollPos=0； $window.scroll函数{ var iCurScrollPos=$this.scrollTop； 如果iCurScrollPos>iScrollPos{ $“标题”。淡出500； }否则{ $'header'.fadeIn500； } iScrollPos=iCurScrollPos； }; }; * { 保证金：0； 填充：0； -webkit框大小：边框框；/*宽度和高度值包括内容、填充和边框，而不是边距*/ -moz框大小：边框框； 框大小：边框框； -webkit点击突出显示颜色：rgba0,0,0,0；/*删除触摸设备上的突出显示*/ -webkit点击突出显示颜色：透明； } html{ 位置：相对位置； 最小高度：100%；/*粘性页脚*/ 溢出y：滚动； 高度：2500px； } 身体{ 字体系列：Helvetica Neue、Helvetica、arial、无衬线字体； 字体大小：正常； 字号：18px； 线高：1.4； 字母间距：1px； 颜色：000； } 正文、输入、文本区域、选择、按钮{ 文本呈现：优化易读性； -webkit字体平滑：抗锯齿； -moz osx字体平滑：灰度； } 标题{ 位置：固定； 宽度：100%； 排名：0； 左：0； 保证金：0； 填充：0； z指数：9999； 背景色：eee； } .移动导航{ 显示：无；/*隐藏移动导航*/ } 左导航{ 浮动：左； } 右导航{ 浮动：对； } 导航{ 位置：相对位置； 填充：0 5px； } 导航ul{ 列表样式：无； 字体大小：0；/*删除默认间距*/ } 李海军{ 显示：内联块； } 导航a{ 显示：块； 字号：18px； 字体大小：正常； 文本转换：大写； 文本对齐：居中； 文字装饰：无； 背景色：透明； 填充：0 10px； 线高：44px； } 导航a：链接， 导航a：已访问{ 颜色：111； 文字装饰：无； } 导航a：悬停， 导航a：激活{ 颜色：999； } 像这样使用jQuery中的滚动函数-

$document.readyfunction{ var-iScrollPos=0； $window.scroll函数{ var iCurScrollPos=$this.scrollTop； 如果iCurScrollPos>iScrollPos{ $“标题”。淡出500； }否则{ $'header'.fadeIn500； } iScrollPos=iCurScrollPos； }; }; * { 保证金：0； 填充：0； -webkit框大小：边框框；/*宽度和高度值包括内容、填充和边框，而不是边距*/ -moz框大小：边框框； 框大小：边框框； -webkit点击突出显示颜色：rgba0,0,0,0；/*删除触摸设备上的突出显示*/ -webkit点击突出显示颜色：透明； } html{ 位置：相对位置； 最小高度：100%；/*粘性页脚*/ 溢出y：滚动； 高度：2500px； } 身体{ 字体系列：Helvetica Neue、Helvetica、arial、无衬线字体； 字体大小：正常； 字号：18px； 线高：1.4； 字母间距：1px； 颜色：000； } 正文、输入、文本区域、选择、按钮{ 文本呈现：优化易读性； -webkit字体平滑：抗锯齿； -moz osx字体平滑：灰度； } 标题{ 位置：固定； 宽度：100%； 排名：0； 左：0； 保证金：0； 填充：0； z指数：9999； 背景色：eee； } .移动导航{ 显示：无；/*隐藏移动导航*/ } 左导航{ 浮动：左； } 右导航{ 浮动：对； } 导航{ 位置：相对位置； 填充：0 5px； } 导航ul{ 列表样式：无； 字体大小：0；/*删除默认间距*/ } 李海军{ 显示：内联块； } 导航a{ 显示：块； 字号：18px； 字体大小：正常； 文本转换：大写； 文本对齐：居中； 文字装饰：无； 背景色：透明； 填充：0 10px； 线高：44px； } 导航a：链接， 导航a：已访问{ 颜色：111； 文字装饰：无； } 导航a：悬停， 导航a：激活{ 颜色：999； } 试试这个

 (function () {
      var previousScroll = 0;

   $(window).scroll(function () {
   var currentScroll = $(this).scrollTop();
   if (currentScroll > previousScroll){
      $('header').fadeOut(500);
   }
   else {
       $('header').fadeIn(500);
   }
   previousScroll = currentScroll;
  });
  }());

试试这个

 (function () {
      var previousScroll = 0;

   $(window).scroll(function () {
   var currentScroll = $(this).scrollTop();
   if (currentScroll > previousScroll){
      $('header').fadeOut(500);
   }
   else {
       $('header').fadeIn(500);
   }
   previousScroll = currentScroll;
  });
  }());

---

如果要在顶部滚动之前隐藏，请尝试工作。请尝试以下操作：

作用{ var-previousScroll=0； $window.scroll函数{ var currentScroll=$this.scrollTop； 如果currentScroll>previousScroll{ $‘菜单栏’。淡出0； } 否则{ $'菜单栏'.fadeIn0； } };

---

}; 如果要在顶部滚动之前隐藏，请尝试工作。请尝试以下操作：

作用{ var-previousScroll=0； $window.scroll函数{ var currentScroll=$this.scrollTop； 如果currentScroll>previousScroll{ $‘菜单栏’。淡出0； } 否则{ $‘菜单栏’。淡入淡出 In0； } };

---

};谢谢你，伙计！是否可以在该脚本中添加悬停显示？在显示标题之前添加额外的滚动条，因为它现在直接在滚动条上，看起来有点紧张添加一些额外的滚动条会解决这个问题。谢谢伙计！是否可以在该脚本中添加悬停显示？在显示标题之前添加额外的scrollup，因为它现在直接在scrollup上，看起来有点紧张添加一些额外的scrollup将解决这个问题。