滚动时具有固定位置的响应式导航栏

Question

When scrolling my list items do not show within the scroll bar. 滚动列表时，项目不会显示在滚动条中。 also when I have minimized the screen to a breakpoint the burger icons show and is clickable but when scrolling down the page that has all the links within it (white background page) does not scroll with the page. 此外，当我将屏幕最小化到断点时，汉堡图标显示并且是可点击的，但是当向下滚动时，其中包含所有链接的页面（白色背景页面）不会随页面滚动。 please compare this website for reference as this is very difficult to explain.. http://findmatthew.com/ 请比较这个网站以供参考，因为这很难解释.. http://findmatthew.com/

I have tried making the position fixed when the break has been met but it still will not show the li tags when this has been done. 我已经尝试在满足中断时修复位置，但在完成此操作后仍然不会显示li标签。 likewise with the fixed bar when scrolling 同样在滚动时使用固定杆

 .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>

I expect the output when scrolling the taskbar to be sticky. 我希望滚动任务栏时的输出是粘性的。

and when the burger icon has been clicked once the media queries has been met for the li tags to also be shown. 并且一旦满足媒体查询就点击了汉堡图标，也可以显示li标签。

Answer 1

I have tried making the position fixed 我已经尝试修复这个职位

 <!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>

Answer 2

I looked at the web pages you referenced and ended up with this. 我看了你引用的网页，最后得到了这个。 Since you added javascript as one of the tags, I assumed it was ok to add some javascript. 由于您添加了javascript作为其中一个标记，我认为可以添加一些javascript。 I also took the liberty to relocate some element open and close tags to be more correct. 我也冒昧地重新定位一些元素打开和关闭标签更正确。 Although this may not be the exact result you are looking for, I hope it may help you get further. 虽然这可能不是您正在寻找的确切结果，但我希望它可以帮助您进一步发展。

The code is in the snippet below: 代码位于以下代码段中：

 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>

滚动时具有固定位置的响应式导航栏

问题描述

2 个解决方案

解决方案1
0 2019-06-06 08:34:19

解决方案2
0 2019-06-06 09:49:05

滚动时具有固定位置的响应式导航栏

问题描述

2 个解决方案

解决方案1 0 2019-06-06 08:34:19

解决方案2 0 2019-06-06 09:49:05

解决方案1
0 2019-06-06 08:34:19

解决方案2
0 2019-06-06 09:49:05