Question

以下是codepen链接https://codepen.io/greysniper/pen/NABKRW

<body>
    <header id="header">
        <div class="wrap">
          <img src="images/header-logo.png" alt="header-img">
           <nav id="navbar">
               <a href="#">Home</a>
               <a href="#">Services</a>
               <a href="#">About</a>
               <a href="#">Skills</a>
               <a href="#">Portfolio</a>
               <a href="#">Contact</a>
           </nav>
       </div>
   </header>

   <h1>PLANUS DESIGN</h1>

如果你需要了解更多的东西而不是告诉我，因为我只是一个初学者！

Answer 1

啊，旧的崩溃边缘问题由于第一个元素具有position: fixed，因此它不会参与文档流程。因此，h1虽然是后来的，但却算作第一个元素，因此它的最高边缘会与身体的上边缘坍塌。

现在我说＆＃34;崩溃＆＃34;，但这是一个令人遗憾的短语，会引起很多混乱。实际上，没有任何东西崩溃，身体继承了＃34; h1的上边距。

所以可能的解决方案是：对h1使用填充而不是边距

＆＃13;

* {margin:0}
header {
  background:#bbb;
  position:fixed; height:80px; width:100%;
  z-index:-1;
}

h1 {
  padding-top:20px;
  text-align:center;
}

＆＃13;

<header>The header</header>
<h1>The h1</h1>

＆＃13;

或者，为固定的导航栏指定一个明确的top:0。

＆＃13;

* {margin:0}
header {
  background:#bbb;
  position:fixed; height:80px; width:100%;
  top:0;
  z-index:-1;
}

h1 {
  margin-top:20px;
  text-align:center;
}

＆＃13;

<header>The header</header>
<h1>The h1</h1>

＆＃13;

Answer 2

您可以更准确地解释一下您的问题吗？如果要将<h1>标题添加到标题，可以使用：

        function Scroll(){
            var top = document.getElementById("header");
            var top2 = document.getElementById("navbar");
            var ypos = window.pageYOffset;
            if(ypos > 187){
                top.style.height = "60px";
                top2.style.lineHeight = "60px";
            }
            else{
                top.style.height = "80px";
                top2.style.lineHeight = "80px";
                }
        }
    window.addEventListener("scroll",Scroll);

* {
    margin: 0;
    padding: 0;
}

.wrap {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

body {
    height: 2000px;
}

a {
    text-decoration: none;
}

html {
    background: url("../images/header_bg.jpg") no-repeat center center fixed;
    background-size: cover;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
}

#header {
    position: fixed;
    font-family: "Lato", serif;
    height: 80px;
    width: 100%;
    background-color: rgba(55, 76, 93, 0.4);
    transition: all 0.4s;
}

header img {
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
}

nav {
    float: right;
    height: 80px;
    line-height: 80px;
    transition: all 0.4s;
}

nav a {
    color: white;
    margin-right: 30px;
    font-family: "Lato", sans-serif;
    font-size: 16px;
}

nav a:hover {
    color: #0ccbbb;
    transition: 0.4s ease-in;
}

h1 {
    text-align: center;
    margin-top: 20px;
}

<html>
  <body>
    <header id="header">
       <div class="wrap">  
         <img src="images/header-logo.png" alt="header-img">
          <nav id="navbar">
            <a href="#">Home</a>
            <a href="#">Services</a>
            <a href="#">About</a>
            <a href="#">Skills</a>
            <a href="#">Portfolio</a>
            <a href="#">Contact</a>
          </nav>
       </div>
       <h1>PLANUS DESIGN</h1>  
    </header>
  </body>
</html>

Navbar随着标题向下移动

2 个答案: