我需要使用CSS样式将导航栏设计成Material Design应用程序中类似于应用栏的样式,例如Google Keep应用程序或Playstore应用程序。在这个导航栏中有一个标题和一个简单的菜单。
我现在有一个内容div和两个固定的div在顶部。其中一个始终固定,另一个在滚动时具有负边距。但是,如果我向下滚动,会出现短暂的“闪烁”效果,我不知道为什么。
$(document).ready( function() {
var lastScrollY = 0;
var lastScrollDownY = 0;
var lastScrollUpY = 0;
$(window).scroll(function() {
var scrollY = $(this).scrollTop();
// detect scroll down / up
if(scrollY < lastScrollY)
{
var diffScroll = lastScrollDownY - scrollY;
if(diffScroll > 105)
{
diffScroll = 105;
}
var navbarY = -105+diffScroll;
$("#navbar-bottom").css({
"margin-top":navbarY+"px"
});
lastScrollUpY = scrollY;
} else {
var diffScroll2 = lastScrollDownY - lastScrollUpY;
if(diffScroll2 > 105)
{
diffScroll2 = 105;
}
$("#navbar-bottom").css({
"margin-top":"-"+diffScroll2+"px"
});
lastScrollDownY = scrollY;
}
lastScrollY = scrollY;
});
});
body {
height:100%;
}
#header {
width:100%;
}
#navbar-top {
width:100%;
position:fixed;
top:0;
z-index:1000;
height:35px;
background-color:#1976D2;
}
#navbar-bottom {
width: 100%;
position:fixed;
top:0;
z-index: 999;
height:105px;
background-color: #2196F3;
}
#navbar-bottom .navbar {
padding-top: 35px;
}
#wrapper {
padding-top: 105px;
position: relative;
height:2000px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="header">
<div id="navbar-top">
ActionBar (always fixed)
</div>
<div id="navbar-bottom">
<div class="navbar">
Menu links here
</div>
</div>
</div>
<div id="wrapper">
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem
</div>
</div>
</body>
非常感谢您的帮助!
var navbarY = -105+diffScroll;
。如果你在这个变量上执行console.log
,你会发现它最初是负数。 - Pete