Question

我做了一个标题，下面是一个带有下拉菜单的粘性导航栏。

当我激活下拉菜单时，它与导航栏完美契合。但是如果我在网站上向下滚动它不再适合，我会在导航栏和下拉菜单之间获得等于我标题高度的距离。

向下滚动时标题是否按下了我的下拉菜单？或者是从网站顶部向下到在网站上向下滚动时保持存在的下拉菜单的距离？

我已经尝试修复它好几天了，但我无法让它工作。

/* THIS IS FROM MY topnavigation.css*/

.topnav {
  position: sticky;
  top: 0px;
  overflow: hidden;
  background-color: rgb(2, 31, 70);
}

.topnav a {
  float: left;
  display: block;
  border-right:1px solid #bbb;
  width: 125px;
  font-size: 1.0em !important;
  font-family: 'verdana';
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
  border-right:1px solid #bbb;
}

.dropdown .dropbtn {
  width: 125px;
  font-size: 17px;    
  border: 0;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: fixed;
  background-color: rgb(79, 111, 150);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  float: none;
  color: #f2f2f2;
  border-right:0px;
  border-bottom:1px solid #bbb;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: rgb(53, 76, 105);
  color: white;
}

.dropdown-content a:hover {
  background-color: rgb(79, 111, 150);
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
  
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;

  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    width: auto;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    text-align: left;
  }
}

/* THIS IS FROM MY style.css */

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  background-color: rgb(3, 19, 34);
}

.header {
  top: 0px;
  padding: 40px;
  margin: auto;
  background-color: rgb(17, 54, 102);
  text-align: center;
  color: #ffffff;  
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
  min-height: calc(100vh - 157.88px - 70px);
}

/* Left and right column */
.column.side {
  width: 20%;
  margin-top: 1%;
}

.front.leftside.columns.content {
  width: 100%;

}

.front.rightside.columns.content {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

/* Middle column */
.column.middle {
  width: 60%;
}

.front.column.middle {
  width: 100%;
}

/* Artikel på forsiden */
.front.article {
  background-color: #ffffff;
  border-radius: 10px;
  padding-top: 10px;
  padding-left: 10%;
  padding-right: 10%;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 781px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

.sixteen.px {
  font-size: 16px;
}

.eighteen.px {
  font-size: 18px;
}

/* Billed INDSTILLINGER */
/* img border-radius AFRUNDER BILLEDERS KANTER */
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  }

/* Style the footer */
.footer {
  left: 0;
  bottom: 0;
  position: relative;
  width: 100%;
  padding: 10px;
  background-color: rgb(2, 31, 70);
  text-align: center;
  color: #ffffff;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <title>CSS Website Layout</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="CSS/style.css">
  <link rel="stylesheet" href="CSS/topnavigation.css">
</head>

<body>

<header class="header">Mads Ottobrøker</header>

<div class="topnav" id="myTopnav">
  <a href="index.html" class="active"><i class="fa fa-fw fa-home"></i> Forsiden</a>
  <a href="mig.html"><i class="fa fa-fw fa-user"></i> Om mig</a>
  <a href="cv.html"><i class="fa fa-fw fa-file-alt"></i> CV</a>
  <div class="dropdown">
    <button class="dropbtn"><i class="fa fa-fw fa-book-open"></i> Portfolio
    </button>
    <div class="dropdown-content">
      <a href="#">Webdesign</a>
      <a href="#">3D Grafik</a>
    </div>
  </div>
  <a href="kontakt.html"><i class="fa fa-fw fa-envelope"></i> Kontakt</a>
  <a class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a>
</div>


<div class="row">
  <div class="column side">
    <div class="front leftside columns content">
        <img src="images/.jpg" alt="Mads Ottobrøker" width="95%" height="95%">
    </div>
  </div>

  <div class="column middle">
    <div class="front column middle">
      <div class="front article">
        <h1>Voksenelevplads søges!</h1>
        <p>
        <h2>Kontorelev med speciale i administration søger elevplads.</h2>
        </p>
        <p><i><h5>Dec 15, 2020</h5></i></p>
        <hr>
        <h3 class="eighteen px">Mit navn er Mads Ottobrøker, jeg er 38 år og bosat i Hadsund.</h3>
        <p class="sixteen px">
          Jeg søger job som kontorelev med speciale i administration. Jeg brænder for at opnå en god og alsidig,
          kontoruddannelse med speciale i administration, da den giver en solid erfaring samt mulighed, for at
          netværke og videreudvikle sig i et professionelt miljø. Jeg ønsker at arbejde med administration, fordi det
          er et godt og spændende arbejde.
        </p>
        <p class="sixteen px">
          Jeg har gennemført HF samt 5 ugers EUS-forløb. Jeg er tilskudsberettiget voksenelev.
        </p>
        <h3 class="eighteen px">Hvad jeg tilbyder:</h3>
        <p class="sixteen px">
          Jeg har en god forståelse for administration, og kan tilrettelægge mit arbejde således, at mine opgaver
          udføres rettidig og med omhu. Jeg er mødestabil, engageret, og god til at samarbejde. Jeg tager ansvar for
          mit arbejde og kan arbejde både selvstændigt og i teams. Jeg nyder at lære nyt, og har intet problem med
          skiftende arbejdsfunktioner.
        </p>
        <p class="sixteen px">
          Fra detailhandlen er jeg vant til kontakt med borgere, jeg er glad for kontakten og har altid sat en ære i,
          at yde dem den bedst mulige service. Jeg har erfaring med administrering af egne områder i butik, hvor jeg
          bl.a. har håndteret varelager, indkøb, salg og bestillinger.
        </p>
        <p class="sixteen px">
          Jeg har erfaring med: Windows, Word, Excel, PowerPoint, Adobe Photoshop, WordPress og HTML.
        </p>
        <p class="sixteen px">
          Jeg kan tale og skrive på dansk og engelsk, har kørekort B og truckcertifikat
        </p>
        <br>
        <br>
        <br>
      </div>
    </div>
  </div>

  <div class="column side">
    <div class="front rightside columns content">
      <a class="twitter-timeline" data-lang="da" data-width="100%" data-height="400" data-theme="light"
        href="https://twitter.com/MadsOttobroker?ref_src=twsrc%5Etfw">Tweets by MadsOttobroker</a>
      <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
    </div>
  </div>
</div>

<script>
  function myFunction() {
    var x = document.getElementById("myTopnav");
    if (x.className === "topnav") {
      x.className += " responsive";
    } else {
      x.className = "topnav";
    }
  }
</script>

<div class="footer">
  <p>Copyright © 2020 Mads Ottobrøker All Right Reserved.</p>
</div>

</body>
</html>

Drop down menu looks good

Drop down menu is no longer connected to navigation bar after scrolling

Answer 1

return gulp.src("src/img/*"); 上的 position: fixed; 导致该元素相对于浏览器窗口，并忽略它所在的任何父级或祖父级，这就是它始终保持在同一位置的原因。如果您的页面有很多内容使页面更高，您可以滚动页面，而该元素将保留在同一位置。

将其切换为 .dropdown-content 将相对于其父项进行定位。
然后，将 position: absolute; 从 overflow: hidden; 和 .topnav 中移除，因为这已结束。
然后在 .dropdown 上添加 .topnav 和 width: 100%;。

float: left;

/* THIS IS FROM MY topnavigation.css*/

.topnav {
  position: sticky;
  top: 0px;
  /* overflow: hidden; */
  background-color: rgb(2, 31, 70);
  float: left;
  width: 100%;
}

.topnav a {
  float: left;
  display: block;
  border-right:1px solid #bbb;
  width: 125px;
  font-size: 1.0em !important;
  font-family: 'verdana';
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  /* overflow: hidden; */
  border-right:1px solid #bbb;
}

.dropdown .dropbtn {
  width: 125px;
  font-size: 17px;    
  border: 0;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: rgb(79, 111, 150);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
  float: none;
  color: #f2f2f2;
  border-right:0px;
  border-bottom:1px solid #bbb;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: rgb(53, 76, 105);
  color: white;
}

.dropdown-content a:hover {
  background-color: rgb(79, 111, 150);
  color: white;
}

.dropdown:hover .dropdown-content {
  display: block;
  
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;

  }
  .topnav a.icon {
    float: right;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
    width: auto;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    text-align: left;
  }
}

/* THIS IS FROM MY style.css */

* {
  box-sizing: border-box;
}

body {
  margin: 0px;
  background-color: rgb(3, 19, 34);
}

.header {
  top: 0px;
  padding: 40px;
  margin: auto;
  background-color: rgb(17, 54, 102);
  text-align: center;
  color: #ffffff;  
}

/* Create three unequal columns that floats next to each other */
.column {
  float: left;
  padding: 10px;
  min-height: calc(100vh - 157.88px - 70px);
}

/* Left and right column */
.column.side {
  width: 20%;
  margin-top: 1%;
}

.front.leftside.columns.content {
  width: 100%;

}

.front.rightside.columns.content {
  width: 95%;
  margin-left: auto;
  margin-right: auto;
}

/* Middle column */
.column.middle {
  width: 60%;
}

.front.column.middle {
  width: 100%;
}

/* Artikel på forsiden */
.front.article {
  background-color: #ffffff;
  border-radius: 10px;
  padding-top: 10px;
  padding-left: 10%;
  padding-right: 10%;
  font-family: Georgia, 'Times New Roman', Times, serif;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 781px) {
  .column.side, .column.middle {
    width: 100%;
  }
}

.sixteen.px {
  font-size: 16px;
}

.eighteen.px {
  font-size: 18px;
}

/* Billed INDSTILLINGER */
/* img border-radius AFRUNDER BILLEDERS KANTER */
img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 10px;
  }

/* Style the footer */
.footer {
  left: 0;
  bottom: 0;
  position: relative;
  width: 100%;
  padding: 10px;
  background-color: rgb(2, 31, 70);
  text-align: center;
  color: #ffffff;
}

Answer 2

您的代码中有两个问题。修复这两个 CSS，您将获得预期的行为。

首先，position: fixed 中的 .dropdown-content。由于 position: fixed 元素是相对于浏览器窗口定位的。将其更改为 position: absolute。

.dropdown-content {
  display: none;
  //position: fixed;
  position: absolute;
  background-color: rgb(79, 111, 150);
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

其次，overflow: hidden 中的 .topnav。我猜您正在使用它来创建 Block-level formatting context。因此，不要将 overflow: hidden 用于块级格式，而是在 display: flow-root css 中添加 .topnav。

.topnav {
  position: sticky;
  top: 0px;
  //overflow: hidden;
  background-color: rgb(2, 31, 70);
  display: floot-root;
 }

滚动时下拉菜单未连接到粘性导航栏

2 个答案: