如何隱藏/顯示導航欄，當用戶滾動向上/向下

Question

隱藏/顯示導航欄，當用戶滾動向上/向下

這裏是我想要實現的例子： http://haraldurthorleifsson.com/ 或 http://www.teehanlax.com/story/readability/

當您向上滾動時向下滾動屏幕並向下滑動時，導航欄在屏幕上向上滑動。我已經想通過淡入/淡出來做到這一點，但我想用與例子中完全相同的動畫來實現它。 注：我已經嘗試過的slideIn（）和像它的拉伸動畫的方式......

JQUERY：

var previousScroll = 0, 
headerOrgOffset = $('#header').offset().top; 

$('#header-wrap').height($('#header').height()); 

$(window).scroll(function() { 
    var currentScroll = $(this).scrollTop(); 
    console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset); 
    if(currentScroll > headerOrgOffset) { 
     if (currentScroll > previousScroll) { 
      $('#header').fadeOut(); 
     } else { 
      $('#header').fadeIn(); 
      $('#header').addClass('fixed'); 
     } 
    } else { 
     $('#header').removeClass('fixed'); 
    } 
    previousScroll = currentScroll; 
}); 

CSS：

#header { 
    width: 100%; 
    z-index: 100; 
} 

.fixed { 
    position: fixed; 
    top: 0; 
} 

#header-wrap { 
    position: relative; 
} 

HTML：

<div id="header-wrap"> 
    <div id="header" class="clear"> 
     <nav> 
      <h1>Prototype</h1> 
     </nav> 
    </div> 
</div> 

Answer 1

你試過動畫了嗎？但用導航欄的高度替換-60px。但是消極。

$(window).scroll(function() { 
    var currentScroll = $(this).scrollTop(); 
    console.log(currentScroll + " and " + previousScroll + " and " + headerOrgOffset); 
    if(currentScroll > headerOrgOffset) { 
     if (currentScroll > previousScroll) { 
      $('#header').animate({ 
       top: '-60px'  //Change to Height of navbar 
      }, 250);    //Mess with animate time 
     } else { 
      $('#header').animate({ 
       top: '0px' 
      },250); 
      $('#header').addClass('fixed'); 
     } 
    } else { 
     $('#header').removeClass('fixed'); 
    } 
    previousScroll = currentScroll; 
}); 

Answer 2

要獲得資產淨值的內部內容向上滑動，而不是被逐漸隱藏，你需要做的父元素上的動畫，並保持內部元件在父母的底部，就像這樣：

jsfiddle

<div id="header-wrap"> 
    <div id="header" class="clear"> 
     <nav><h1>Prototype</h1>another line<br/>another line 
     </nav> 
    </div> 
</div> 

CSS

body { 
    height: 1000px; 
} 

#header { 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
} 

#header-wrap { 
    width: 100%; 
    position: fixed; 
    background-color: #e0e0e0; 
} 

JS

var previousScroll = 0, 
    headerOrgOffset = $('#header').height(); 

$('#header-wrap').height($('#header').height()); 

$(window).scroll(function() { 
    var currentScroll = $(this).scrollTop(); 
    if (currentScroll > headerOrgOffset) { 
     if (currentScroll > previousScroll) { 
      $('#header-wrap').slideUp(); 
     } else { 
      $('#header-wrap').slideDown(); 
     } 
    } else { 
      $('#header-wrap').slideDown(); 
    } 
    previousScroll = currentScroll; 
}); 

Answer 3

無論你使用navbar元素，它必須包含在它transition: transform 0.3s，然後你的JavaScript需要看用戶的滾動0 transform的

#navbar { 
    position: fixed; 
    right: 0; left: 0; top: 0; 
    /* your height */ 
    height: 40px; 
    /* .... */ 
    -webkit-transform: translate3d(0,0,0); 
    -moz-transform: translate3d(0,0,0); 
    transform: translate3d(0,0,0); 
    -webkit-transition: -webkit-transform .3s; 
    -moz-transition: -moz-transform .3s; 
    -o-transition: transform .3s; 
    transition: transform .3s; 
} 
#navbar.scrolled { 
    /* subtract your height */ 
    -webkit-transform: translate3d(0,-40px,0); 
    -moz-transform: translate3d(0,-40px,0); 
    transform: translate3d(0,-40px,0); 
} 

基地：

;(function(){ 
    var previousScroll = 0; 
    var navbar = document.getElementById('navbar'), 
     navClasses = navbar.classList; // classList doesn't work <IE10 

    window.addEventListener('scroll', function(e){ 
     var currentScroll = window.scrollY; 
     var isDown = currentScroll > previousScroll; 

     if (isDown && !navClasses.contains('scrolled')){ 
      // scrolling down, didn't add class yet 
      navClasses.add('scrolled'); // we hide the navbar 
     } else if (!isDown){ 
      // scrolling up 
      navClasses.remove('scrolled'); // won't error if no class found 
     } 

     // always update position 
     previousScroll = currentScroll; 
    }); 
}()); //run this anonymous function immediately 

Answer 4

嘗試淨空js。

此外，您可以編輯CSS類並部署過渡效果。

http://wicky.nillia.ms/headroom.js