스크롤 할 때 navbar를 숨기지 만 움직이지는 않지만 자연스럽게 'scrolled away'

Question

그래서 "top : -50px"라는 클래스를 추가하는 것만으로 스크롤 할 때 navbar를 숨기는 것이 쉽습니다. 그러나 매우 자연스럽지 않습니다. 내비게이션 막대가 실제 스크롤을 통해 숨어 있으면 스크롤 속도가 항상 맞아 떨어지면 훨씬 더 좋을 것입니다. 애니메이션을 적용하는 대신에, 나는 네비게이션 바를 스크롤하여 멀리 화면 상에 놓기를 원한다.

어떻게 접근하나요?

그런데 실제로 어떤 JQuery도 사용하고 싶지 않습니다. 저는 Vue를 사용하고 있습니다.

Answer 1

이는 가까운 : http://jsfiddle.net/r6kTs/104/ 외에도 그것은 또한 작동하지 않습니다, 이것은 정말 나쁜 perfomance *을 가지고 있으며, 아마도 그 사실에 대해 할 수있는 많은이없는 사실에서

완벽하게 아직 : 전체 탐색 표시 줄이 숨겨 지도록 아래로 스크롤 한 다음 조금 위로 스크롤하여 조금만 표시 한 다음 여전히 남아있는 탐색 표시 줄로 다시 아래로 스크롤 한 다음 다시 위로 이동합니다. 조금은 예상하지 못한 것. 나는 그것이 왜 그렇게하는지 압니다. 그러나 나는 지금 당장 해결책을 찾을 수 없습니다. 어쩌면 너의 누군가가 할 수 있을까?

* 편집 : 사실, 이제는 내 사이트에서 실행 했으므로 성능이 너무 좋아지는 것을 눈치 채지 못했습니다. 예, 많이 요구하지만 가치가 있다고 생각합니다. 낮은 하드웨어.

$(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

창의 스크롤 이벤트가 특정 지점을 통과 할 때까지 고정 된 위치 (또는 현재 보유하고있는 위치)를 설정 한 다음 스크롤 컨테이너에 상대적인 탐색 막대를 만듭니다. 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> 
    ... 

자바 스크립트

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; 

    } 

}); 

그것은 매우 해키이지만, 원리를 보여줍니다

이 예를 참조하십시오. 내가 지금 그것을 가지고로