滚动时导航栏和徽标保持在一起？
Posted
技术标签:
【中文标题】滚动时导航栏和徽标保持在一起？【英文标题】：Navbar and logo stay together when scrolling? 【发布时间】：2021-05-11 23:56:47 【问题描述】：我试图让导航栏在用户向下滚动时跟随徽标。目前只有标志是固定的。当我尝试固定标题而不是 header-img 时，徽标和导航栏都消失了。任何帮助将不胜感激。
我遇到的另一个问题是，每当我调整窗口大小时，徽标都会调整大小。
#header-img
width: 3%;
height: auto;
position: fixed;
nav
list-style-type: none;
position: relative;
left: 65px;
line-height: 60px;
font-size: 20px;
<div id="header">
<img id="header-img" src="https://cdn-0.idownloadblog.com/wp-content/uploads/2018/07/Apple-logo-black-and-white.png"></img>
<nav id="nav-bar">
<a class="nav-link" href="#mac">Mac</a>
<a class="nav-link" href="#ipad">iPad</a>
<a class="nav-link" href="#contactus">Contact Us</a>
<a class="nav-link" href="#support">Support</a>
</nav>
</div>
<div id="body">
<iframe id="video" src="https://www.youtube.com/watch?v=PSS889-qeJQ">
</iframe>
<h1 id="mac">Macs</h1>
<h1 id="ipad">iPads</h1>
<h1 id="contactus">Contact Us</h1>
<h1 id="support">Support</h1>
</div>【问题讨论】：
如您所说，导航栏和徽标在将其位置设置为固定后消失。我认为你在那之后没有设置 z-index 。为导航栏和图标设置 z-index: 1 您到底想要什么？标志和导航都要修复？ @Irfanwani 好的，我试过你说的，但没用 @Anjs 是的，我希望修复徽标和导航 @Ismael 我的回答对你有帮助吗？ 【参考方案1】：您需要从文档中删除边距，并且还要使标题具有固定位置
顺便说一句，您的 iframe 无法正常工作，因为您需要指定 /embed 而不是 /watch 参数才能使其正常工作。您可以点击here了解更多信息
我还对您的页面样式进行了一些更改，但您可以在 CSS 规则中进行更改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*
margin: 0;
#header-img
width: 3%;
/* height: auto; */
position: fixed;
body
background-color: black;
nav
list-style-type: none;
position: relative;
left: 65px;
line-height: 60px;
font-size: 20px;
nav a
padding-left: 10px;
text-decoration: none;
color: black;
font-weight: 500;
text-transform: uppercase;
#header
background-color: white;
width: 100%;
position: fixed;
.content
display: flex;
justify-content: center;
margin-bottom: 60px;
h1
color: white;
margin-bottom: 10px;
padding: 10px;
</style>
</head>
<body>
<div id="header">
<img id="header-img"
src="https://cdn-0.idownloadblog.com/wp-content/uploads/2018/07/Apple-logo-black-and-white.png"></img>
<nav id="nav-bar">
<a class="nav-link" href="#mac">Mac</a>
<a class="nav-link" href="#ipad">iPad</a>
<a class="nav-link" href="#contactus">Contact Us</a>
<a class="nav-link" href="#support">Support</a>
</nav>
</div>
<br><br><br><br><br><br>
<div class="content">
<iframe src="https://www.youtube.com/embed/PSS889-qeJQ"
title="Iframe Example"></iframe>
</div>
<div class="heading">
<h1 id="mac">Macs</h1>
<h1 id="ipad">iPads</h1>
<h1 id="contactus">Contact Us</h1>
<h1 id="support">Support</h1>
</div>
</body>
</html>未来的想法
您可以开始学习响应式设计，以便您的网站可以在任何设备上运行，不受任何限制。研究 flexbox，你会学到很多有趣的东西，或者开始学习一个框架，比如 Bootstrap，它会让你的生活更轻松。
【讨论】：
【参考方案2】：您的代码包含带有结束标签的img 标签。默认没有结束标签。
要修复导航栏，您需要将position: fixed; 添加到#header。
为防止徽标调整大小，您需要将 width: 100%; 添加到 img 标记并为其父标记 (.img-container) 添加特定的宽度和高度。
试试这个：
#header-img
width: 100%;
height: auto;
nav
list-style-type: none;
position: fixed;
left: 65px;
line-height: 60px;
font-size: 20px;
top: 0px;
#header
position: fixed;
height: 60px;
.img-container
height: 35px;
width: 35px;
display: inline-block;
<div id="header">
<div class="img-container">
<img id="header-img" src="https://cdn-0.idownloadblog.com/wp-content/uploads/2018/07/Apple-logo-black-and-white.png">
</div>
<nav id="nav-bar">
<a class="nav-link" href="#mac">Mac</a>
<a class="nav-link" href="#ipad">iPad</a>
<a class="nav-link" href="#contactus">Contact Us</a>
<a class="nav-link" href="#support">Support</a>
</nav>
</div>
<div id="body">
<iframe id="video" src="https://www.youtube.com/watch?v=PSS889-qeJQ">
</iframe>
<h1 id="mac">Macs</h1>
<h1 id="ipad">iPads</h1>
<h1 id="contactus">Contact Us</h1>
<h1 id="support">Support</h1>
</div>【讨论】：
【参考方案3】：我删除了这里的标志只是因为它太大了。我用position: fixed;将#header添加到CSS中，看看：
#header
position: fixed;
z-index: 1;
width: 100%;
height: 7%;
background-color: #0066FF;
#header-img
width: 3%;
height: auto;
position: fixed;
nav
list-style-type: none;
position: relative;
left: 65px;
line-height: 60px;
font-size: 20px;
<div id="header">
<nav id="nav-bar">
<a class="nav-link" href="#mac">Mac</a>
<a class="nav-link" href="#ipad">iPad</a>
<a class="nav-link" href="#contactus">Contact Us</a>
<a class="nav-link" href="#support">Support</a>
</nav>
</div>
<div id="body">
<iframe id="video" src="https://www.youtube.com/watch?v=PSS889-qeJQ">
</iframe>
<h1 id="mac">Macs</h1>
<h1 id="ipad">iPads</h1>
<h1 id="contactus">Contact Us</h1>
<h1 id="support">Support</h1>
</div>【讨论】：
现在您可以看到导航栏固定在顶部。 我尝试使用它，但标题和导航栏仍然不显示。 #header 位置：固定； z-index：1；宽度：100%；身高：7%；背景颜色：#0066FF；以上是关于滚动时导航栏和徽标保持在一起？的主要内容，如果未能解决你的问题，请参考以下文章