Question

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

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

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

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

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

enter image description here

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

Answer 1

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

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

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

Answer 2

您还可以在HTML中使用onscroll属性。例如，向下滚动时，元素如下所示：<div id="header" class="sdown_concealed"></div>。同时，向上滚动如下：<div id="header" class="sup_visible"></div>。它可能比使用Jquery更难，但只想使用Javascript而没有库的人可以使用这样的技术：<div id="header" class="unchanged" onscroll="scrollDown();"></div>。滚动后：<div id="header" class="sdown_concealed" onscroll="scrollUp(); this.onscroll = scrollDown;"></div>。这是一个不太简单的解决方案，但我发现它非常有用，因为我不使用Jquery之类的Javascript库（不过我应该）。

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

2 个答案: