如何在向下滾動時隱藏div，然后向上滾動顯示

Question

我想要顯示和隱藏菜單的情況，如圖片。

您可以在下圖中看到有一個樹部分。 打開頁面時的第一部分，右下方菜單仍將顯示。

向下滾動時，菜單將淡入，當您向上滾動時，菜單將淡入淡出。

facebook和tumblr這樣做。 我想知道他們怎么做到這一點。 任何人都可以告訴我一些例子。

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

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> 。 這是一個不太簡單的解決方案，但我發現它非常有用，因為我不使用Javascript等Javascript庫（我應該這樣做）。