導航欄向下移動，標題爲

-1

以下是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>

如果你需要知道的東西比告訴我，因爲我只是一個初學者更！

來源

2016-07-28 Utkarsh Singh

你可以添加一個屏幕截圖？ – jonathanGB

你不想讓你的導航欄隨標題移動嗎？ – ExcellentSP

爲您的身體標記添加邊框 –

啊，舊的崩潰邊緣問題。
由於第一個元素有position: fixed，因此它不參與文檔流程。因此h1雖然後來成爲第一個元素，因此它的頂部邊距會與身體的頂部邊距一起坍塌。

現在我說「崩潰」，但這是一個不幸的短語，造成了很多混亂。實際上，沒有任何東西被摺疊，身體「繼承」h1的頂部邊緣。

所以可能的解決方案是：使用填充，而不是保證金，爲H1

* {margin:0} 
 
header { 
 
    background:#bbb; 
 
    position:fixed; height:80px; width:100%; 
 
    z-index:-1; 
 
} 
 

 
h1 { 
 
    padding-top:20px; 
 
    text-align:center; 
 
}

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

，或者給定導航欄明確top:0。

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

 
h1 { 
 
    margin-top:20px; 
 
    text-align:center; 
 
}

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

來源

2016-07-28 20:47:43

謝謝李斯特先生，你的頂級解決方案：0有效。 –

謝謝大家花時間回覆我的查詢.. –

你能或許可以解釋你的問題更多的是什麼呢？如果你想在<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>

來源

2016-07-28 20:49:28

導航欄向下移動，標題爲

回答

相關問題