Javascript 如何在Meteor on scroll中隐藏/显示引导导航栏？

我想在向下滚动时隐藏引导导航栏，但在向上滚动时显示引导导航栏

这是大多数手机应用程序中常见的导航栏反应，例如Whatsapp

我成功地在一个HTML页面中编码了理想的效果，您可以在附件中找到。我无法让它在我的meteor应用程序中工作，或者不知道如何让它在我的meteor应用程序中工作，因此我正在寻找meteor软件包

有人知道我如何让下面的代码在meteor环境中工作吗

html:

以及我的JavaScript文件的一个版本：

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
didScroll = true;
});

setInterval(function() {
if (didScroll) {
    hasScrolled();
    didScroll = false;
}
}, 250);

function hasScrolled() {
var st = $(this).scrollTop();

// alert("st VALUE is: " +st);

// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
    return;

// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
    // Scroll Down
    $('header').removeClass('navbar-default').addClass('nav-up');
//       alert("You are scrolling down!");
//       alert(+st+ " > " +lastScrollTop+ " && " +st+ " > " +navbarHeight);
} else {
    // Scroll Up
    if(st + $(window).height() > $(document).height()) {
//          alert(+st+ " + " +$(window).height()+ " < "     +$(document).height() )
        $('header').removeClass('nav-up').addClass('navbar-default');
    }
}

lastScrollTop = st;
}

//向下滚动时隐藏标题
卷轴；
var lastScrollTop=0；
varδ=5；
var navbarHeight=$（'header'）.outerHeight（）；
$（窗口）。滚动（功能（事件）{
didcoll=true；
});
setInterval（函数（）{
如果（滚动）{
哈斯克罗尔（）；
didcoll=false；
}
}, 250);
函数hasScrolled（）{
var st=$（this.scrollTop（）；
//警报（“st值为：“+st”）；
//确保它们滚动的次数大于增量
if（Math.abs（lastScrollTop-st）lastScrollTop&&st>navbarHeight）{
//向下滚动
$（'header'）.removeClass（'navbar-default'）.addClass（'nav-up'）；
//警报（“您正在向下滚动！”）；
//警报（+st+“>”+lastScrollTop+“&&&+st+“>”+navbarHeight）；
}否则{
//向上滚动
如果（st+$（窗口）.height（）>$（文档）.height（））{
//警报（+st++“+”++$（窗口）.height（）++“<”++$（文档）.height（））
$（'header'）.removeClass（'nav-up'）.addClass（'navbar-default'）；
}
}
lastScrollTop=st；
}

@Santi他的问题是一个有效的问题-他问了如何实现一个特定的结果，并给出了他迄今为止的尝试。他要求推荐一个方案的事实是无关紧要的，因为他不需要一个方案来实现this@Sean-你是对的，我没有注意到他还提到：“或者也许我可以如何让下面的代码在流星环境中工作？”。尽管如此，该职位的重点应该改变以反映这一点；这篇文章的标题和开头都明确要求一个非现场资源。@Sean想要的/主要的解决方案是一个meteor包，因此是tile。“也许我怎样才能让下面的代码在meteor环境中工作？”表明了一个次要的解决方案…@SirBT没有一个包可以为应用程序的导航栏添加效果。这就像我要求一个软件包，使我的应用程序的导航栏每两秒钟闪烁一次红色和黑色。我一直在为你的问题辩护，尽管你的“期望的解决方案”是胡说八道，所以我不知道你为什么表现得好像我不明白it@Sean我道歉！这个职位是为桑蒂设计的

body {
padding-top: 40px;
}

/*
header {
background: #f5b335;
height: 40px;
position: fixed;
top: 0;
transition: top 0.2s ease-in-out;
width: 100%;
}
*/

.navbar-default{
background-color: #ea5b31;
border-color: #ea5b31;
margin-bottom: 0px;
height: 50px;
position: fixed;
top: -1px;
width: 100%;
transition: top 0.2s ease-in-out;
}

.nav-up {
top: -40px;
}

main {
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAPklEQVQYV2O8dOnSfwYg0NPTYwTRuAAj0QqxmYBNM1briFaIzRbi3UiRZ75uNgUHGbfvabgfsHqGaIXYPAMAD8wgC/DOrZ4AAAAASUVORK5CYII=
) repeat;
height: 2000px;
}

footer { background: #ddd;}
* { color: transparent}

// Hide Header on on scroll down
var didScroll;
var lastScrollTop = 0;
var delta = 5;
var navbarHeight = $('header').outerHeight();

$(window).scroll(function(event){
didScroll = true;
});

setInterval(function() {
if (didScroll) {
    hasScrolled();
    didScroll = false;
}
}, 250);

function hasScrolled() {
var st = $(this).scrollTop();

// alert("st VALUE is: " +st);

// Make sure they scroll more than delta
if(Math.abs(lastScrollTop - st) <= delta)
    return;

// If they scrolled down and are past the navbar, add class .nav-up.
// This is necessary so you never see what is "behind" the navbar.
if (st > lastScrollTop && st > navbarHeight){
    // Scroll Down
    $('header').removeClass('navbar-default').addClass('nav-up');
//       alert("You are scrolling down!");
//       alert(+st+ " > " +lastScrollTop+ " && " +st+ " > " +navbarHeight);
} else {
    // Scroll Up
    if(st + $(window).height() > $(document).height()) {
//          alert(+st+ " + " +$(window).height()+ " < "     +$(document).height() )
        $('header').removeClass('nav-up').addClass('navbar-default');
    }
}

lastScrollTop = st;
}