Javascript：导航栏在滚动并到达顶部时消失

Question

我在我的网站上创建了一个导航栏（仍在开发中）。当访问者向上滚动时，会出现此导航栏。但是，导航栏始终保持最佳状态。在顶部我有原始菜单，所以需要有导航栏。

我想达到的目的是当访问者点击某个点时，菜单栏就会消失，就像点击div并消失。到目前为止没有运气。我使用-70px（position：fixed）将浏览栏放置在视口外，并在浏览器向上滚动时通过JavaScript显示。

这是JavaScript的导航栏：

var lastScrollTop = pageYOffset || document.documentElement.scrollTop; 

window.addEventListener("scroll", function() { 
    var st = window.pageYOffset || document.documentElement.scrollTop; 
    if (st > lastScrollTop) { 
// Scroll Down 

$('.navbar').css({ 
    "transform": "translate3d(0,-70px,0)" 
}); 

} else { 
// Scroll Up 

$('.navbar').css({ 
    "transform": "translate3d(0,70px,0)" 
}); 
} 
    lastScrollTop = st; 
}, false); 

任何帮助，使击球一定DIV向上滚动时，我将非常感激导航栏消失。提前致谢！

这是我得到的最接近，见下文。基本上它是我需要的（禁用某个区域的导航栏，在这种情况下是从底部开始的350px）。我只需要它是顶部，而不是底部。

$(window).scroll(function() { 
var pxFromBottom = 350; 
if ($(window).scrollTop() + $(window).height() > $(document).height() - pxFromBottom) { 
$('.navbar').css({ 
    "transform": "translate3d(0,-70px,0)" 
}); 
} 
}); 

Answer 1

更新：一些试验和错误，我设法让它工作。我添加了第二个条件，当滚动时隐藏菜单栏。我添加了这部分： if（（st> lastScrollTop）||（$（this）.scrollTop（）< 500））{ 这是导航栏隐藏时的条件，最佳。

var lastScrollTop = pageYOffset || document.documentElement.scrollTop; 

window.addEventListener("scroll", function() { 
    var st = window.pageYOffset || document.documentElement.scrollTop; 
    if ((st > lastScrollTop) || ($(this).scrollTop() < 500)) { 
    // Scroll Down 
    $('.navbar').css({ 
     "transform": "translate3d(0,-70px,0)" 
    }); 
    } else { 
    // Scroll Up 
    $('.navbar').css({ 
     "transform": "translate3d(0,70px,0)" 
    }); 
    } 
    lastScrollTop = st; 
    }, false); 

Answer 2

您可以使用Headroom.js来做到这一点。这是一个轻量级（2KB），高性能的JS小部件（无依赖！），允许您根据用户的滚动更改类。

我建议隐藏你的标头translateY(-100%)而不是使用像素值，所以即使你的标题高度改变，它仍然可以正常工作。

快速以下演示：

var header = document.querySelector('.header'); 
 
var headroom = new Headroom(header, { 
 
    "offset": 200, 
 
    "tolerance": 5, 
 
    "classes": { 
 
    "unpinned": "header--unpinned" 
 
    } 
 
}); 
 
headroom.init();

.header { 
 
    position:fixed; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    padding: 2rem; 
 
    color: white; 
 
    background: black; 
 
    transition: all .4s cubic-bezier(.770,0,.175,1); 
 
} 
 

 
.header--unpinned { 
 
    transform: translateY(-100%); 
 
} 
 

 
/* Demo purposes only */ 
 
body { height: 2000px; margin: 0; } 
 
p { padding: 2rem; } 
 
/* Demo purposes only */

<script src="https://unpkg.com/headroom.js"></script> 
 

 
<header class="header">Header</header> 
 

 
<!-- Demo purposes only --> 
 
<p>Scroll ↓</p><p>Scroll ↓</p><p>Scroll ↓</p><p>Scroll ↓</p> 
 
<!-- Demo purposes only -->

有很多你可以做更多，如改变上滚动的标题颜色（例如Poppulo's website），甚至使用不同的动画（见Headroom.js playroom）。