[英]How do I make my responsive Navbar sticky with only HTML & CSS?
所以我目前有一个导航栏，它只响应使用 HTML 和 CSS 构建的屏幕大小。 但我希望它贴在容器上，并保持对不同屏幕尺寸的响应。 无论如何只有 HTML 和 CSS 可以做到这一点？ 我在这篇文章中包含了响应式导航栏代码，我将对其进行更新和粘贴。
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> ```
您需要position: fixed; 实际上 position 就像top: 0; .
但您也可以使用position: sticky; 属性而不是避免重叠的内容，就像提到的其他答案一样。 在这里你可以看到对 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>
您也可以使用position:sticky; 和top:0在您的第一个媒体查询中将导航栏保持在顶部，即使您滚动也是如此。 这将比position:fixed更好，因为当您位于顶部时，内容不会滑到 header 后面。
编辑 - 直接嵌入代码。
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>
如何仅使用 HTML 和 CSS（无 JS）制作“粘性”导航栏？
[英]How to make a “sticky” navbar using only HTML and CSS (without JS)?
Bootstrap 导航栏不会用作粘性导航栏，我如何使其工作
[英]Bootstrap navbar will not function as a sticky navbar, how do i make it work
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.