ナビゲーションバーは、次の見出し

-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

navをヘッダーと一緒に動かさないようにしますか？ – ExcellentSP

bodyタグにボーダーを追加します –

ああ、古い崩壊マージン問題。
最初の要素はposition: fixedなので、ドキュメントフローには含まれません。したがって、h1は最初の要素としてカウントされます。したがって、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

ありがとうございました。 –

ありがとう、私のクエリに応答するために時間がかかった人.. –

あなたはおそらくより正確にあなたの質問を説明できますか？あなたはヘッダに<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

ナビゲーションバーは、次の見出し

答えて

関連する問題