スクロールするときにnavbarを非表示にしますが、アニメーションではなく自然にスクロールします。

Question

"top：-50px"のクラスを追加するだけでスクロールするときにnavbarを隠すのは簡単です。しかし、それは非常に自然な感じではありません。ナビゲーションバーが実際のスクロールに隠れている場合、スクロールのスピードが常に収まるように、それはもっとすばらしいでしょう。それをアニメーション化するのではなく、ナビゲータをスクロールして画面上に戻したい（画面上をスクロールして再び画面上に戻す一定量のピクセルを瞬時に移動させたい）。

これにどのようにアプローチしますか？

ところで、私は本当にこのためにJQueryを使用したくない、私はVueを使用しています。

Answer 1

これは私が今それを得たとして近い：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; 

}); 
}); 

Answer 2

topでCSSトランジションを使用して前後にアニメーションを適用できます。ただし、スクロール時に非表示にすると、クラスを追加/削除して変更をトリガーすることができます。

Answer 3

私は間違ったことを起こさなかったが、スクロールするときにバーを非表示にしたい場合は、position: absoluteというだけでなく、スクロールして消えるようにしておきましょうか？それは些細なことかもしれないが、あなたが自然に消えたかったら、それはそうかもしれない。

Answer 4

ウィンドウ上のスクロールイベントが特定のポイントを通過するまで固定された（または現在持っているもの）navbarの位置を設定してから、スクロールしているコンテナを基準にしてnavbarを作成します。

この例を参照してください：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; 

    } 

}); 

それは非常にハックですが、原理を示しています。