Question

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

这是大多数手机应用中常见的Navbar反应，例如在Whatsapp上。

我在HTML页面中成功编写了您想要附加的效果。我不能让它在我的流星应用程序中工作，或者不知道如何让它在我的流星应用程序上工作，因此我寻找流星包。

有谁知道如何在流星环境中使用以下代码？

HTML：

<header class="navbar-default">
This is your menu.
<script     src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script>
<script type="text/javascript" src="javaScript.js"></script>
<link rel="stylesheet" href="style.css">
</header>

<main>
   This is your body.
</main>

<footer>
   This is your footer.
</footer>

在CSS文件下面：

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}

我的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;
}

如何在滚动中隐藏/显示Meteor中的引导导航栏？

0 个答案: