我试图使导航栏跟随徽标每当用户向下滚动。目前只有logo是固定的。当我试图使标题固定而不是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" width="1080" height="1920" 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>你需要删除文档的页边距，并使标题有一个固定的位置
顺便说一下，您的iframe不工作，因为您需要指定/embed而不是/watch参数才能使其工作。你可以点击这里了解更多信息
我也做了一些改变你的页面的风格，但你可以改变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" height="400" width="600"
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，这会让你的生活更轻松。
您的代码包含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" width="1080" height="1920" 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>我删除了这里的标志，因为它太大了。我用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" width="1080" height="1920" 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>