材料设计带CSS的App栏
[英]Material design App bar with CSS
问题描述
I need to style a Navigation bar like the App bar on material design apps with CSS. 
我需要使用CSS在材料设计应用程序上设置类似App栏的导航栏。 For example Google-Keep app or Playstore app. 例如Google-Keep应用或Playstore应用。 In this Navigation bar are a title and a simple menu. 在此导航栏中有标题和简单菜单。
What i have is a content div and two fixed div on the top. 我所拥有的是内容div和顶部的两个固定div。 One of them is always fixed and the other one has a negative margin-top on scroll. 其中一个总是固定的，另一个在滚动时有一个负边距顶部。 But, if i scroll down, there is a short "blink"-effect and i don't know why. 但是，如果我向下滚动，有一个短暂的“眨眼” - 效果，我不知道为什么。
$(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>
Thanks for any help! 谢谢你的帮助！
2 个解决方案
解决方案1
1 已采纳 2016-10-14 13:49:04
Here you go. 干得好。 Added transform: translateY() , which is much more dynamic then just changing the margin-top property. 添加了transform: translateY() ，这比仅更改margin-top属性要动态得多。 Check it out and tell me if it does satisfy you, if not - let me know and I will try to improve it. 看看它，告诉我它是否真的让你满意，如果没有 - 告诉我，我会尽力改进它。
https://jsfiddle.net/pfj9j8md/ https://jsfiddle.net/pfj9j8md/
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({ 'transform': 'translateY(0)' }); lastScrollUpY = scrollY; } else { var diffScroll2 = lastScrollDownY - lastScrollUpY; if (diffScroll2 > 105) { diffScroll2 = 105; } $("#navbar-bottom").css({ 'transform': 'translateY(-200px)' }); 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; transition: all .5s ease; } #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>
解决方案2
0
Add a smooth animation for the submenu: 为子菜单添加平滑动画：
#navbar-bottom {
width: 100%;
position: fixed;
top: 0;
z-index: 999;
height: 105px;
background-color: #2196F3;
transition: all 500ms;
}
$(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; transition: all 500ms; } #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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
Material Design顶级应用栏Javascript无法正常工作 - Material Design Top App Bar Javascript not working
使用 Material Design 中的标签栏 html/css/js - Use the tab bar html/css/js from Material Design
Google Material Design网站顶部应用栏图标点击是否正在删除vue-router链接？ - Google material design web top app bar icon clicking is removing vue-router link?
在角度材料设计中调整 sidenav 的大小栏。 - resize bar for sidenav in angular material design.
使用 React 增加 Material Design Lite 进度条 - Incrementing the Material Design Lite Progress bar with React
在Angular 2应用和静态html页面之间共享的Material Design CSS / JS - Material Design CSS/JS shared between Angular 2 app and static html page
如何使用Unpkg作为MDC CSS文件和S文件的存储在Web应用程序上添加Material Design选项卡 - How to add Material Design Tabs on a web app using unpkg as a storage for MDC CSS file and s file
CSS复选框选中的材料设计叠加 - css checkbox checked material design overlay
CSS 2 个图标之间的过渡（材料设计） - CSS Transition between 2 icons (Material Design)
CSS在Material Design Lite和Drift之间的冲突 - CSS Conflict between material design lite and Drift
相关标签