用户向上/向下滚动时如何隐藏/显示导航栏

用户向上/向下滚动时隐藏/显示导航栏

以下是我想要实现的示例： 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：

  
 
 
 
Prototype
 
 
  

Answer 1

要使导航的内部内容向上滑动而不是逐步隐藏，您需要在父元素上执行动画，并将内部元素保留在父元素的底部，如下所示：

的jsfiddle

 
 
 
Prototype
another line
another line 
 
  

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 2

你尝试过动画吗？ 但将-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 3

无论您使用哪种navbar元素，它都必须包含一个transition: transform 0.3s ，并将基础transform为0。

 #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); } 

然后你的javascript需要观看用户的滚动：

 ;(function (){ var previousScroll = 0; var navbar = document.getElementById('navbar'), navClasses = navbar.classList; // classList doesn't work  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

Answer 5

CSS

 @media(min-width: 1079px){ #header{ width:100%; height:82px; border:1px solid grey; background-color: lightgreen; margin:0 auto; position:fixed; transition-property: all; transition-duration: 0.3s; transition-delay: 0s; transition-timing-function: ease-out; } nav{ display: flex; justify-content: space-between; } nav .nav1{ list-style-type: none; padding: 0px; } nav a{ text-decoration: none; color:grey; padding: 13px; display: block; color: grey; margin-top: 15px; } a{ text-decoration: none !important; } nav a:hover{ color: red; } nav .nav1{ display: flex; justify-content: flex-end; } .row2{ background-color: skyblue; height:2000px; margin-top: 82px; } } 

HTML

            
 
 
HOME
 
ABOUT
 
INFO
 
DISCOUNTS
 
BUSINESS
 
BLOG
 
CONTACT
 
 
  
 
this is row2
 
     

JS

 function fun1() { var documentElem=$(document), lastScrollTop=0; scrollabc=80; documentElem.on('scroll',function() { var currentScrollTop=$(this).scrollTop(); console.log(window.pageYOffset); if(currentScrollTop > scrollabc) { if(currentScrollTop>lastScrollTop) { //nav.addClass('hidden'); document.getElementById("header").style.marginTop = "-80px"; console.log("first if block"); } else { // nav.removeClass('hidden'); document.getElementById("header").style.marginTop = "0px"; console.log("2nd if block"); } } lastScrollTop=currentScrollTop; }) } fun1();