Question

因此在滚动时隐藏导航栏只需添加一个带有“top：-50px”的类就很容易了。但是，感觉不是很自然。如果导航栏将通过实际滚动隐藏，那么它会更好，因此滚动的速度总是适合的。我想要将导航栏向外滚动并返回到屏幕上（立即离开并在一定数量的像素再次向后滚动屏幕后），而不是将其设置为动画。

你会怎么做？

顺便说一下，我真的不想使用任何JQuery，我正在使用Vue。

Answer 1

我希望我没有弄错，但是如果你想在滚动时隐藏这个栏，为什么不只是position: absolute它并保留正常滚动使它消失？这可能听起来微不足道，但如果你想要自然消失，那可能是它，不是吗？

Answer 2

您可以在top上使用CSS过渡来来回动画。但是，当您滚动时触发隐藏，您可以添加/删除类以触发更改。

Answer 3

将导航栏的位置设置为固定（或当前的任何位置），直到窗口上的滚动事件通过某个点，然后使导航栏相对于滚动容器。

请参阅此示例：https://jsfiddle.net/n97tu7nt/

HTML

<div id="main-container">
  <div class="nav" id="nav" style="position:fixed; height: 100px; background-color: blue; color: white; width:100%;">
    This is the Nav Bar <span id="pos"></span>
  </div>
  <div style="position:relative; top:130px;" id="container">
    <p>
      This is some text
    </p>
  ...

Javascript

var c = document.getElementById('nav');
var t = document.getElementById('container');
var p = document.getElementById('pos');

p.innerHTML = window.scrollY;

var last_known_scroll_position = 0;
var ticking = false;

function doSomething(scroll_pos) {

  p.innerHTML = scroll_pos;
  if (scroll_pos > 100) {
    c.style.position = 'relative';
    t.style.top = 0;
  }
}

// From https://developer.mozilla.org/en-US/docs/Web/Events/scroll
window.addEventListener('scroll', function(e) {

  last_known_scroll_position = window.scrollY;

  if (!ticking) {

    window.requestAnimationFrame(function() {
      doSomething(last_known_scroll_position);
      ticking = false;
    });

    ticking = true;

  }

});

这非常hacky，但显示原则。

Answer 4

这就像我现在一样接近：http://jsfiddle.net/r6kTs/104/

除了事实上这种表现非常糟糕*并且可能没有很多事情可以做到这一点，它还没有完全正常工作：当你向下滚动以便整个导航栏隐藏，然后向上滚动一点，以便只显示一点，然后再次向下滚动，还有一些导航栏仍然存在，然后再次上升 - 它跳了一点它不应该。我知道它为什么这样做，但我现在无法找到解决办法。也许有人可以吗？

*编辑：实际上，现在我在我的网站上运行它，我没有注意到这么糟糕的表现 - 是的，它需要很多，但我认为它可能是值得的:)可能会在设备上注意到虽然硬件很低。

$(function(){
var lastScrollTop = 0, delta = 5, last = 'up', foo = 99999999, state = 'fixed', lastpos;
$(window).scroll(function(event){
   var st = $(this).scrollTop();

   // if(Math.abs(lastScrollTop - st) <= delta) return;

   if (st > lastScrollTop){      
       // scrolling down
       if(last == 'up') {
            if (state == 'fixed') {
                lastpos = (document.documentElement.scrollTop - 1);
              $("#header").css({'position': 'absolute', 'top': lastpos});
              state = 'absolute';
          }
          last = 'down';
       }
   } else {
       // scrolling up
       let posnow = document.documentElement.scrollTop
       if ((posnow - lastpos) > 50 || (posnow - lastpos) < 0) {
           if (last == 'down') {
               foo = posnow - 51;
               $("#header").css({'position': 'absolute', 'top': foo});

           } else {
              if (foo > st) {
                  $("#header").css({'position': 'fixed', 'top': '0'});
                  state = 'fixed'
              }
           }
        }   
                last = 'up';
   }
   lastScrollTop = st;

});
});

滚动时隐藏导航栏，但这样做是为了使它不是动画但自然“滚动”

4 个答案: