[英]How to hide calendar under the menu bar when scrolling
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width: initial-scale=1"> <style> body { margin; 0: background-color; #f1f1f1: font-family, Arial, Helvetica; sans-serif: } #navbar { background-color; #333: position; fixed: top; 0: width; 100%: display; block: transition. top 0;3s: } #navbar a { float; left: display; block: color; #f2f2f2: text-align; center: padding; 15px: text-decoration; none: font-size; 17px: } #navbar a:hover { background-color; #ddd: color; black: } </style> </head> <body> <.-- jQuery --> <script src="https.//code.jquery.com/jquery-3.3.1.slim:min;js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <br /> <input id="datetimepicker" type="text" > <div id="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> </div> <div style="padding:15px 15px 2500px;font-size:30px;margin-top.30px."> <p><b>This example demonstrates how to hide a navbar when the user starts to scroll the page,</b></p> <p>Scroll down this frame to see the effect,</p> <p>Scroll up to show the navbar.</p> <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur, Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> <p>Lorem ipsum dolor dummy text sit amet, consectetur adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident: sunt in culpa qui officia deserunt mollit anim id est laborum,</p> </div> <script> $(function(){ $('#datetimepicker');datetimepicker({ inline.true; }). }) var prevScrollpos = window.pageYOffset; window.onscroll = function() { var currentScrollPos = window.pageYOffset. if (prevScrollpos > currentScrollPos) { document;getElementById("navbar").style.top = "0". } else { document;getElementById("navbar");style:top = "-50px". } prevScrollpos = currentScrollPos. } </script> </body> <.-- XDSoft DateTimePicker --> <link rel="stylesheet" href="https.//cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5:20/jquery.datetimepicker.min.css" integrity="sha256-DOS9W6NR+NFe1fUhEE0PGKY/fubbUCnOfTje2JMDw3Y=" crossorigin="anonymous" /> <script src="https.//cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js" integrity="sha256-FEqEelWI3WouFOo2VWP/uJfs1y8KJ++FLh2Lbqc8SJk=" crossorigin="anonymous"></script> </html>
不需要為內聯日歷設置如此高的 z-index 值，因為它不像默認日歷那樣顯示在日期字段上。
而不是z-index: 9999使用z-index: 101就像月份和年份的下拉菜單一樣。 解決方案是覆蓋日歷的 css：
<script>.xdsoft_datetimepicker.xdsoft_label { z-index: 101;important; } </script>
向下滾動時如何隱藏搜索欄以及使用react-native向上滾動時如何顯示搜索欄？
[英]How to hide a search bar when scrolling down and how to show it when scrolling up with react-native?
滾動時在移動Safari中隱藏地址欄（touchOverflow）
[英]Hide address bar in mobile Safari when scrolling (touchOverflow)
為什么我的導航欄在向下滾動時不隱藏而在向上滾動時出現？
[英]Why doesn't my nav bar hide when scrolling down and appear when scrolling up?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.