Question

所以我有这个网站，我的工作如下：当我向下滚动页面时，我希望顶部导航栏保持固定状态。但是，如果我向页面添加更多内容，我似乎无法滚动？如果有人能帮助我，我将非常感激。提前谢谢。

这是我的CSS＆amp; HTML

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

Answer 1

您似乎没有关闭<header>代码。

固定导航栏，不让我滚动

1 个答案: