Javascript 如何在向下滚动时隐藏div，然后显示向上滚动

我想做的情况下显示和隐藏菜单一样的图片

您可以在下图中看到有一个树部分。第一部分当你打开页面时，右下方的菜单仍将显示

向下滚动时，菜单将淡出，向上滚动时，菜单将淡出

facebook和tumblr就是这样做的。我想知道他们是如何做到这一点的。任何人都可以给我举个小例子

我从codepen.io创建了这个，但它只是标题，而且在向上滚动时也有问题

var previousScroll = 0, // previous scroll position
        menuOffset = 54, // height of menu (once scroll passed it, menu is hidden)
        detachPoint = 650, // point of detach (after scroll passed it, menu is fixed)
        hideShowOffset = 6; // scrolling value after which triggers hide/show menu
    // on scroll hide/show menu
    $(window).scroll(function() {
      if (!$('nav').hasClass('expanded')) {
        var currentScroll = $(this).scrollTop(), // gets current scroll position
            scrollDifference = Math.abs(currentScroll - previousScroll); // calculates how fast user is scrolling
        // if scrolled past menu
        if (currentScroll > menuOffset) {
          // if scrolled past detach point add class to fix menu
          if (currentScroll > detachPoint) {
            if (!$('nav').hasClass('detached'))
              $('nav').addClass('detached');
          }
          // if scrolling faster than hideShowOffset hide/show menu
          if (scrollDifference >= hideShowOffset) {
            if (currentScroll > previousScroll) {
              // scrolling down; hide menu
              if (!$('nav').hasClass('invisible'))
                $('nav').addClass('invisible');
            } else {
              // scrolling up; show menu
              if ($('nav').hasClass('invisible'))
                $('nav').removeClass('invisible');
            }
          }
        } else {
          // only remove “detached” class if user is at the top of document (menu jump fix)
          if (currentScroll <= 0){
            $('nav').removeClass();
          }
        }
        // if user is at the bottom of document show menu
        if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
          $('nav').removeClass('invisible');
        }
        // replace previous scroll position with new one
        previousScroll = currentScroll;
      }
    })
    // shows/hides navigation’s popover if class "expanded"
    $('nav').on('click touchstart', function(event) {
      showHideNav();
      event.preventDefault();
    })
    // clicking anywhere inside navigation or heading won’t close navigation’s popover
    $('#navigation').on('click touchstart', function(event){
        event.stopPropagation();
    })
    // checks if navigation’s popover is shown
    function showHideNav() {
      if ($('nav').hasClass('expanded')) {
        hideNav();
      } else {
        showNav();
      }
    }
    // shows the navigation’s popover
    function showNav() {
      $('nav').removeClass('invisible').addClass('expanded');
      $('#container').addClass('blurred');
      window.setTimeout(function(){$('body').addClass('no_scroll');}, 200); // Firefox hack. Hides scrollbar as soon as menu animation is done
      $('#navigation a').attr('tabindex', ''); // links inside navigation should be TAB selectable
    }
    // hides the navigation’s popover
    function hideNav() {
      $('#container').removeClass('blurred');
      window.setTimeout(function(){$('body').removeClass();}, 10); // allow animations to start before removing class (Firefox)
      $('nav').removeClass('expanded');
      $('#navigation a').attr('tabindex', '-1'); // links inside hidden navigation should not be TAB selectable
      $('.icon').blur(); // deselect icon when navigation is hidden
    }
    // keyboard shortcuts
    $('body').keydown(function(e) {
      // menu accessible via TAB as well
      if ($("nav .icon").is(":focus")) {
        // if ENTER/SPACE show/hide menu
        if (e.keyCode === 13 || e.keyCode === 32) {
          showHideNav();
          e.preventDefault();
        }
      }
      // if ESC show/hide menu
      if (e.keyCode === 27 || e.keyCode === 77) {
        showHideNav();
        e.preventDefault();
      }
    })

var-previousScroll=0，//上一个滚动位置
menuOffset=54，//菜单高度（一旦滚动通过，菜单将隐藏）
detachPoint=650，//分离点（滚动通过后，菜单固定）
hideShowOffset=6；//滚动值，之后触发隐藏/显示菜单
//在滚动隐藏/显示菜单上
$（窗口）。滚动（函数（）{
if（！$（'nav'）.hasClass（'expanded'））{
var currentScroll=$（this）.scrollTop（），//获取当前滚动位置
scrollDifference=Math.abs（currentScroll-previousScroll）；//计算用户滚动的速度
//如果滚动到菜单上
如果（当前滚动>菜单偏移）{
//如果滚动超过分离点，则将类添加到修复菜单
如果（当前滚动>分离点）{
if（！$（'nav'）.hasClass（'detached'））
$（'nav'）.addClass（'detached'）；
}
//如果滚动速度快于hideShowOffset隐藏/显示菜单
如果（滚动差异>=hideShowOffset）{
如果（currentScroll>previousScroll）{
//向下滚动；隐藏菜单
if（！$（'nav'）.hasClass（'invisible'））
$（'nav'）.addClass（'invisible'）；
}否则{
//向上滚动；显示菜单
if（$（'nav'）.hasClass（'invisible'））
$（'nav'）.removeClass（'invisible'）；
}
}
}否则{
//仅当用户位于文档顶部时删除“分离”类（菜单跳转修复）
如果（currentScroll=document.body.offsetHeight）{
$（'nav'）.removeClass（'invisible'）；
}
//用新的滚动位置替换以前的滚动位置
previousScroll=currentScroll；
}
})
//如果类“已展开”，则显示/隐藏导航的弹出框
$（'nav'）。在（'click touchstart'）上，函数（事件）{
showHideNav（）；
event.preventDefault（）；
})
//单击导航或标题内的任何位置都不会关闭导航的弹出窗口
$（“#导航”）。在（'单击touchstart'，函数（事件）{
event.stopPropagation（）；
})
//检查是否显示导航的弹出窗口
函数showHideNav（）{
if（$（'nav'）.hasClass（'expanded'））{
hideNav（）；
}否则{
showNav（）；
}
}
//显示导航的弹出窗口
函数showNav（）{
$（'nav'）.removeClass（'invisible'）.addClass（'expanded'）；
$（'容器'）.addClass（'模糊'）；
window.setTimeout（function（）{$（'body'）.addClass（'no_scroll'）；}，200）；//Firefox hack.在菜单动画完成后立即隐藏滚动条
$（“#导航a”）.attr（'tabindex'，''）；//导航中的链接应该是选项卡可选择的
}
//隐藏导航的弹出框
函数hideNav（）{
$（“#container”）.removeClass（“模糊”）；
setTimeout（function（）{$（'body'）.removeClass（）；}，10）；//允许在删除类之前启动动画（Firefox）
$（'nav'）.removeClass（'expanded'）；
$（“#导航a”）.attr（'tabindex'，'-1'）；//隐藏导航中的链接不应为选项卡可选
$（'.icon'）.blur（）；//隐藏导航时取消选择图标
}
//键盘快捷键
$（'body'）.keydown（函数（e）{
//也可以通过选项卡访问菜单
如果（$（“导航图标”）为（“：焦点”））{
//如果进入/空格显示/隐藏菜单
如果（e.keyCode==13 | | e.keyCode==32）{
showHideNav（）；
e、 预防默认值（）；
}
}
//如果ESC显示/隐藏菜单
如果（e.keyCode==27 | | e.keyCode==77）{
showHideNav（）；
e、 预防默认值（）；
}
})

您可能正在寻找类似的内容？每当您滚动时，它都会检查您滚动的距离以及从上一个滚动位置到哪个方向

var previousScroll = 0;
$(window).scroll(function(event){
   var scroll = $(this).scrollTop();
   if (scroll > previousScroll){
       // downscroll code
   } else {
      // upscroll code
   }
   previousScroll = scroll;
});

---

下面是对该脚本的一些修改和实景应用程序的一点补充：你也可以在HTML中使用

onscroll

属性。例如，当你向下滚动时，元素看起来像这样：

。同时，向上滚动看起来像这样：

。这可能比使用Jquery更难，但是只想使用Javascript而不想使用库的人可以使用这样的技术：

。滚动后：

。这是一个不太简单的解决方案，但我发现它非常有用，因为我不使用诸如Jquery之类的Javascript库（不过我应该这样做）.

你想要这样的东西。@superbhat是的，你是对的。我找到了这个插件，但当我将位置从顶部改为底部时出现了问题。请分享你所做的更改，因为这很容易解决。@waltur buerk的答案就是我想要的。我正在尝试编写代码。你能告诉我你有时间吗如何在这段代码中添加过渡效果，如向下滚动，然后红色div slideDown（隐藏），然后向上滚动，然后SlideUp（显示）请查看我在最后的答案中的编辑。为了方便起见，我添加了一点软糖。非常感谢您的回答。我这样做了，您在演示中遇到了一个小问题。如果您快速上下滚动，动画会不断堆积。我现在编辑了我的小提琴，使其滑动而不是褪色，我的解决方案也解决了动画问题我现在明白了，谢谢你的回答我想要什么，但是我的D