堆栈内存溢出
  繁体   English   中英

材料设计带CSS的App栏

[英]Material design App bar with CSS

 原文  2016-10-14 13:19:45  8   2    javascript/ html/ css/ scroll/ menu

问题描述

我需要使用CSS在材料设计应用程序上设置类似App栏的导航栏。 例如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>

谢谢你的帮助！

2 个解决方案

解决方案1
 1 已采纳  2016-10-14 13:49:04

干得好。 添加了transform: translateY() ，这比仅更改margin-top属性要动态得多。 看看它，告诉我它是否真的让你满意，如果没有 - 告诉我，我会尽力改进它。

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  

为子菜单添加平滑动画： 

#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 中的标签栏 html/css/js Google Material Design网站顶部应用栏图标点击是否正在删除vue-router链接？ 在角度材料设计中调整 sidenav 的大小栏。 使用 React 增加 Material Design Lite 进度条 在Angular 2应用和静态html页面之间共享的Material Design CSS / JS 如何使用Unpkg作为MDC CSS文件和S文件的存储在Web应用程序上添加Material Design选项卡 CSS复选框选中的材料设计叠加 CSS 2 个图标之间的过渡（材料设计） CSS在Material Design Lite和Drift之间的冲突
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM