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

I want to make the case for showing and hiding menu like the picture.

我想要显示和隐藏菜单的情况，如图片。

You can see in the following image there is a tree part. First part when you open the page the right bottom side menu will still showing.

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

When you scroll down then the menu will fadeIn, and when you sroll up then the menu will fadeOut.

当您向下滚动时，菜单将淡入，当您向上滚动时，菜单将淡出。

The facebook and tumblr doing like this. I want to learn how can they do this. Anyone can tell me little example or something.

facebook和tumblr这样做。我想知道他们怎么做到这一点。任何人都可以告诉我一些例子或事情。

I created this DEMO from codepen.io but it is only header think and also there is a problem when scroll up.

我从codepen.io创建了这个DEMO，但它只是标题思考，并且向上滚动时也存在问题。

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();
      }
    })

2 个解决方案

#1

You might be looking for something like this? Whenever you scroll, it checks how far you've scrolled and in what direction from your previous scroll position.

你可能正在寻找这样的东西？无论何时滚动，它都会检查您滚动的距离以及您之前滚动位置的方向。

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

Here's a little complimentary JSFuddle with some modification and live action application of that script: https://jsfiddle.net/d00h1zmn/4/

这里有一些免费的JSFuddle，包含该脚本的一些修改和实时动作应用程序：https：//jsfiddle.net/d00h1zmn/4/

#2

You could also use the onscroll attribute in HTML. For example, when you scroll down, element looks like this: <div id="header" class="sdown_concealed"></div>. Meanwhile, scroll up looks like this: <div id="header" class="sup_visible"></div>. It might be harder than using Jquery, but people who only want to use Javascript and no libraries can use a technique like this: <div id="header" class="unchanged" onscroll="scrollDown();"></div>. After scroll: <div id="header" class="sdown_concealed" onscroll="scrollUp(); this.onscroll = scrollDown;"></div>. It's a less simple solution, but I found it very helpful as I do not use Javascript Libraries such as Jquery (I should, though).

您还可以在HTML中使用onscroll属性。例如，向下滚动时，元素如下所示：

。同时，向上滚动如下所示：

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

。滚动后：

。这是一个不那么简单的解决方案，但我发现它非常有用，因为我不使用Javascript等Javascript库（我应该）。