滾動時具有固定位置的響應式導航欄
[英]Responsive navigation bar with fixed position when scrolling
問題描述
滾動列表時，項目不會顯示在滾動條中。 此外，當我將屏幕最小化到斷點時，漢堡圖標顯示並且是可點擊的，但是當向下滾動時，其中包含所有鏈接的頁面（白色背景頁面）不會隨頁面滾動。 請比較這個網站以供參考，因為這很難解釋.. http://findmatthew.com/
我已經嘗試在滿足中斷時修復位置，但在完成此操作后仍然不會顯示li標簽。 同樣在滾動時使用固定桿
.toggle { padding-left: 48.5%; width: 100%; font-size: 40px; color: red; box-sizing: border-box; display: none; } .nav { padding: 0 0 0 0; text-align: left; margin-bottom: 5px; } ul { width: 80%; margin: 0 auto; padding: 0; } ul li { list-style: none; display: inline-block; padding: 20px; } ul li a { text-decoration: none; color: olive; } #containernav.color { position: fixed; background: yellow; transition: 0.5s; width: 100%; top: 0; padding-bottom: 65px; z-index: 10; opacity: 0.2; ; } #logo { transform: translate(-20%, -5%); max-width: 5%; height: auto; -webkit-transform: translate(-20%, -5%); -moz-transform: translate(-20%, -5%); -ms-transform: translate(-20%, -5%); -o-transform: translate(-20%, -5%); } header #logo h1 { margin: 0; } header a:hover { font-weight: bold; } /* MEDIA QUERIES */ @media only screen and (max-width: 847px) { .toggle { display: block; } ul { width: 100%; display: none; } ul li { display: block; text-align: center; } .active { cursor: pointer; display: block; } }
<header> <div id="containernav"> <nav class="nav"> <div> <ion-icon class="menu toggle" name="menu"></ion-icon> </div> </div> <ul> <div id="logo"> <a href="index.html"><img src="/src/img/logo.jpg.png" width="60" height="60"></a> </div> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="work.html">Work</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="#" download>Resume</a></li> </ul> </nav> </header>
我希望滾動任務欄時的輸出是粘性的。
並且一旦滿足媒體查詢就點擊了漢堡圖標，也可以顯示li標簽。
2 個解決方案
解決方案1
0 2019-06-06 08:34:19
我已經嘗試修復這個職位
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> body { margin: 0; } .navbar { overflow: hidden; background-color: #333; position: fixed; top: 0; width: 100%; } .navbar a { float: left; display: block; color: #f2f2f2; text-align: center; padding: 14px 16px; text-decoration: none; font-size: 17px; } .navbar a:hover { background: #ddd; color: black; } .main { padding: 16px; margin-top: 30px; height: 1500px; /* Used in this example to enable scrolling */ } </style> </head> <body> <div class="navbar"> <a href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> </div> <div class="main"> <h1>Fixed Top Menu</h1> <h2>Scroll this page to see the effect</h2> <h2>The navigation bar will stay at the top of the page while scrolling</h2> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> </div> </body> </html>
解決方案2
0 2019-06-06 09:49:05
我看了你引用的網頁，最后得到了這個。 由於您添加了javascript作為其中一個標記，我認為可以添加一些javascript。 我也冒昧地重新定位一些元素打開和關閉標簽更正確。 雖然這可能不是您正在尋找的確切結果，但我希望它可以幫助您進一步發展。
代碼位於以下代碼段中：
window.addEventListener("scroll", function() { var elementTarget = document.getElementById("frontpage"); if (window.scrollY > (elementTarget.offsetTop + elementTarget.offsetHeight)) { // scrolled past frontpage document.getElementById('containernav').classList.add('fixed'); } else { document.getElementById('containernav').classList.remove('fixed'); } }); function dropdown(e){ var speed = 1; if ( e.classList.contains('open') ) { // If menu is open, close it: document.getElementById('dropdown').setAttribute("style", "display:none"); e.classList.remove("open"); } else { // If menu is not open, open it: document.getElementById('dropdown').setAttribute("style", "display:block"); e.classList.add("open"); } }
body { margin: 0; } .toggle { padding-left: 48.5%; width: 100%; font-size: 40px; color: red; box-sizing: border-box; display: none; } .nav { padding: 0 0 0 0; text-align: left; margin-bottom: 5px; } ul { width: 80%; margin: 0 auto; padding: 0; } ul li { list-style: none; display: inline-block; padding: 20px; } ul li a { text-decoration: none; color: olive; } .fixed { position: fixed; background: yellow; width: 100%; top: 0; z-index: 10; } .frontpage { background: dodgerblue; min-height: 500px; height: 100%; } #logo { transform: translate(-20%, -5%); max-width: 5%; height: auto; -webkit-transform: translate(-20%, -5%); -moz-transform: translate(-20%, -5%); -ms-transform: translate(-20%, -5%); -o-transform: translate(-20%, -5%); } header #logo h1 { margin: 0; } header a:hover { font-weight: bold; } /* MEDIA QUERIES */ @media only screen and (max-width: 847px) { .toggle { display: block; } #dropdown { width: 100%; display: none; } #dropdown.open{ display: block; } #dropdown li { display: block; text-align: center; } .active { cursor: pointer; display: block; } }
<header> <div id="containernav"> <nav class="nav"> <div> <ion-icon class="menu toggle" name="menu" onclick="dropdown(this)"><img src="https://picsum.photos/200" width="50px" height="50px" /></ion-icon> </div> </nav> <ul id="dropdown"> <li id="logo"> <a href="index.html"><img src="https://picsum.photos/300" width="60" height="60"></a> </li> <li><a href="index.html">Home</a></li> <li><a href="about.html">About</a></li> <li><a href="work.html">Work</a></li> <li><a href="contact.html">Contact</a></li> <li><a href="#"download>Resume</a></li> </ul> </div> <div id="frontpage" class="frontpage"> </div> </header> <div class="content"> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <p>Some text some text some text some text..</p> <h1 style="height:1000px">loooong header</h1> </div>
固定位置div，向上滾動時，絕對位置，向下滾動時：google now搜索欄類型行為
[英]position fixed div, when scrolling up and position absolute, when scrolling down: google now search bar type behavior
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.