2016-10-22 6 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