堆棧內存溢出
  簡體   English   中英

材料設計帶CSS的App欄

[英]Material design App bar with CSS

 原文  2016-10-14 13:19:45  2   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