2016-10-22 11 views
-1

私はこのようなウェブサイトを持っています:enter image description here 私はページを下にスクロールするときに上のナビゲーションバーを固定しておきます。しかし、ページにコンテンツを追加すると、スクロールできないようですか? 誰かが私を助けてくれたら大変感謝します。前もって感謝します。固定されたナビゲーションバーは私にスクロールさせません

は、ここでは、あなたの<header>タグを閉じていなかったよう

html, body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
body { 
 
    font-family: 'Open Sans', sans-serif; 
 
} 
 

 
.wrapper { 
 
    width: 1100px; 
 
    max-width: 90%; 
 
    margin: 0 auto; 
 
} 
 

 
#top_header { 
 
    position: fixed; 
 
    top: 0px; 
 
    left: 0px; 
 
    right: 0px; 
 
    z-index: 1; 
 
    background-color: #26ABF5; 
 
    height: 70px; 
 
    width: 100%; 
 
    vertical-align: middle; 
 
} 
 

 
#logo_top { 
 
    display: inline-block; 
 
    float: left; 
 
    width: 53px; 
 
    padding-top: 8px; 
 
} 
 

 
#main_nav { 
 
    display: inline-block; 
 
    font-size: 13px; 
 
    line-height: 70px; 
 
    padding-left: 150px; 
 
} 
 

 
#main_nav a { 
 
    color: #fff; 
 
    font-weight: 400; 
 
    text-decoration: none; 
 
    margin-left: 6em; 
 
} 
 

 
.button { 
 
    float: right; 
 
    justify-content: center; 
 
    display: flex; 
 
    width: 101px; 
 
    margin-top: 16px; 
 
    padding-top: 9px; 
 
    padding-bottom: 9px; 
 
    border-radius: 2px; 
 
    background-color: #fff; 
 
    text-decoration: none; 
 
    font-family: 'Open Sans', sans-serif; 
 
    color: #26abf5; 
 
    font-size: 13px; 
 
    font-weight: 600; 
 
} 
 

 
.banner { 
 
    height: 400px; 
 
    background-image: url('../images/Banner_bg.jpg'); 
 
    background-size: cover; 
 
    background-repeat: no-repeat; 
 
} 
 

 
.banner_header { 
 
    margin-top: 0; 
 
    display: flex; 
 
    padding-top: 89px; 
 
    justify-content: center; 
 
    font-family: 'Open Sans', sans-serif; 
 
    color: #fff; 
 
    font-weight: 700; 
 
    font-size: 33px; 
 
} 
 

 
.banner_paragraph { 
 
    display: flex; 
 
    justify-content: center; 
 
    font-family: 'Open Sans', sans-serif; 
 
    color: #fff; 
 
    font-size: 14px; 
 
    font-weight: 400; 
 
    letter-spacing: 0.5px; 
 
    margin-top: -15px; 
 
} 
 

 
.priser_button { 
 
    display: flex; 
 
    width: 207px; 
 
    justify-content: center; 
 
    border: 3px solid #fff; 
 
    -webkit-transition: background-color 400ms ease; 
 
    transition: background-color 400ms ease; 
 
    font-family: 'Open Sans', sans-serif; 
 
    color: #fff; 
 
    font-weight: 700; 
 
    font-size: 13px; 
 
    letter-spacing: 0.5px; 
 
    padding: 9px 0 9px 0; 
 
    text-decoration: none; 
 
} 
 

 
.priser_button:hover { 
 
    background-color: #26abf5; 
 
} 
 

 
.container { 
 
    display: flex; 
 
    padding-top: 84px; 
 
    justify-content: center; 
 
} 
 

 
.logo { 
 
    width: 53px; 
 
    padding-top: 5px; 
 
} 
 

 
.underbanner_header { 
 
    display: flex; 
 
    margin-top: 30px; 
 
    justify-content: start; 
 
    font-family: 'Open Sans', sans-serif; 
 
}
<body> 
 
    <header id="top_header"> 
 
     <div class="wrapper"> 
 
     <a href="index.html"><img id="logo_top" draggable="false" src="images/logo1.png"></a> 
 
      <nav id="main_nav"> 
 
      <a href="index.html">FORSIDE</a> 
 
      <a href="#">HVAD TILBYDER VI?</a> 
 
      <a href="#">PRISER</a> 
 
      <a href="#">OM OS</a> 
 
      </nav> 
 
      <a class="button" href="#">LOG IND</a> 
 
     </div> 
 
     <div class="banner"> 
 
      <h2 class="banner_header">DANMARKS FEDESTE FITNESS CENTER</h2> 
 
      <p class="banner_paragraph">BLIV EN DEL AF TEAMET I DAG</p> 
 
      <div class="container w-container"><a class="priser_button w-button" href="#">SE VORES PRISER</a> 
 
     </div> 
 
     </div> 
 
     <div class="underbanner"> 
 
     <div class="wrapper"> 
 
     <h3 class="underbanner_header">NYT CENTER I SØNDERBORG</h3> 
 
     <p class="content_p">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.</p> 
 
     </div> 
 
    </div> 
 
    </body>

答えて

2

が見える& HTML私のCSSです。

+0

私はそんなに馬鹿げています。母..私の間違いを指摘してくれてありがとう.. – Jakob

関連する問題