如何仅使用 HTML 和 CSS 使我的响应式导航栏保持粘性？
[英]How do I make my responsive Navbar sticky with only HTML & CSS?
问题描述
So I currently have a navbar that is responsive to the size of the screen built with HTML & CSS only.
所以我目前有一个导航栏，它只响应使用 HTML 和 CSS 构建的屏幕大小。 But I want it to stick to the container and also remain responsive to different screen sizes.但我希望它贴在容器上，并保持对不同屏幕尺寸的响应。 Is there anyway to do this with only HTML & CSS?无论如何只有 HTML 和 CSS 可以做到这一点？ I have included the responsive Navbar code in this post that I would to update and make sticky.我在这篇文章中包含了响应式导航栏代码，我将对其进行更新和粘贴。
body { margin: 0; font-family: "Lato", sans-serif; }.sidebar { margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; }.sidebar a { display: block; color: black; padding: 16px; text-decoration: none; }.sidebar a.active { background-color: #4CAF50; color: white; }.sidebar a:hover:not(.active) { background-color: #555; color: white; } div.content { margin-left: 200px; padding: 1px 16px; height: 1000px; } @media screen and (max-width: 700px) {.sidebar { width: 100%; height: auto; position: relative; }.sidebar a { float: left; } div.content { margin-left: 0; } } @media screen and (max-width: 400px) {.sidebar a { text-align: center; float: none; } }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1.0"> </head> <body> <div class="sidebar"> <a class="active" href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div> <div class="content"> <h2>Responsive Sidebar Example</h2> <p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less,</p> <p>We have also added a media query for screens that are 400px or less. which will vertically stack and center the navigation links.</p> <h3>Resize the browser window to see the effect.</h3> </div> </body> </html> ```
2 个解决方案
解决方案1
0 2020-08-04 18:23:04
You need position: fixed;您需要position: fixed; and an actualy position like top: 0;实际上 position 就像top: 0; . .
But also you could use the position: sticky;但您也可以使用position: sticky; property instead to avoid overlapping content, like the other answer mentioned.属性而不是避免重叠的内容，就像提到的其他答案一样。 Here you can see the browser support which is pretty good for position sticky, but slightly worse than fixed.在这里你可以看到对 position 粘性的浏览器支持非常好，但比固定的稍差。
body { margin: 0; font-family: "Lato", sans-serif; }.sidebar { margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; }.sidebar a { display: block; color: black; padding: 16px; text-decoration: none; }.sidebar a.active { background-color: #4CAF50; color: white; }.sidebar a:hover:not(.active) { background-color: #555; color: white; } div.content { margin-left: 200px; padding: 1px 16px; height: 1000px; } @media screen and (max-width: 700px) {.sidebar { width: 100%; height: auto; position: fixed; top: 0; }.sidebar a { float: left; } div.content { margin-left: 0; } } @media screen and (max-width: 400px) {.sidebar a { text-align: center; float: none; } }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1.0"> <style> </style> </head> <body> <div class="sidebar"> <a class="active" href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div> <div class="content"> <h2>Responsive Sidebar Example</h2> <p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less,</p> <p>We have also added a media query for screens that are 400px or less. which will vertically stack and center the navigation links.</p> <h3>Resize the browser window to see the effect.</h3> </div> </body> </html>
解决方案2
0 2020-08-04 18:27:55
You can also use position:sticky;您也可以使用position:sticky; and top:0 in your first media query to keep the navbar in place at the top, even when you scroll.和top:0在您的第一个媒体查询中将导航栏保持在顶部，即使您滚动也是如此。 This will work better than position:fixed because the content won't slide up behind the header while you are at the top.这将比position:fixed更好，因为当您位于顶部时，内容不会滑到 header 后面。
Edit - embedded code directly.编辑 - 直接嵌入代码。
body { margin: 0; font-family: "Lato", sans-serif; }.sidebar { margin: 0; padding: 0; width: 200px; background-color: #f1f1f1; position: fixed; height: 100%; overflow: auto; }.sidebar a { display: block; color: black; padding: 16px; text-decoration: none; }.sidebar a.active { background-color: #4caf50; color: white; }.sidebar a:hover:not(.active) { background-color: #555; color: white; } div.content { margin-left: 200px; padding: 1px 16px; height: 1000px; } @media screen and (max-width: 700px) {.sidebar { width: 100%; height: auto; position: sticky; top: 0; }.sidebar a { float: left; } div.content { margin-left: 0; } } @media screen and (max-width: 400px) {.sidebar a { text-align: center; float: none; } }
<,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1.0"> </head> <body> <div class="sidebar"> <a class="active" href="#home">Home</a> <a href="#news">News</a> <a href="#contact">Contact</a> <a href="#about">About</a> </div> <div class="content"> <h2>Responsive Sidebar Example</h2> <p>This example use media queries to transform the sidebar to a top navigation bar when the screen size is 700px or less,</p> <p>We have also added a media query for screens that are 400px or less. which will vertically stack and center the navigation links.</p> <h3>Resize the browser window to see the effect.</h3> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.