滚动时导航栏和徽标保持在一起？答案

【问题标题】：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" 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>

【问题讨论】：

如您所说，导航栏和徽标在将其位置设置为固定后消失。我认为你在那之后没有设置 z-index 。为导航栏和图标设置 z-index: 1
您到底想要什么？标志和导航都要修复？
@Irfanwani 好的，我试过你说的，但没用
@Anjs 是的，我希望修复徽标和导航
@Ismael 我的回答对你有帮助吗？

标签： html css

【解决方案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" 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，它会让你的生活更轻松。

【讨论】：

【解决方案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" 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>

【讨论】：

【解决方案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" 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>

【讨论】：

现在您可以看到导航栏固定在顶部。
我尝试使用它，但标题和导航栏仍然不显示。 #header{ 位置：固定； z-index：1；宽度：100%；身高：7%；背景颜色：#0066FF； }