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

【问题标题】：Drop down menu isn't connected to sticky navigation bar when scrolling滚动时下拉菜单未连接到粘性导航栏
【发布时间】：2020-12-22 15:42:35
【问题描述】：

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

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

向下滚动时，标题是否会按下我的下拉菜单？还是从网站顶部向下滚动到在网站上向下滚动时一直存在的下拉菜单的距离？

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

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

【问题讨论】：

  • 您可以尝试将position: sticky; top: 48px 添加到.dropdown-content，但悬停时会增加.topnav 的高度。此外，如果您尝试使用带有position: relative 的父级和带有position: absolute 的.dropdown-content，它将不会显示，因为visibility: hidden 在此之上。 .topnav 的这个标记应该被重新设计，因为我认为没有 CSS 能力来处理它。

标签： html css


【解决方案1】：

.dropdown-content 上的 position: fixed; 导致该元素与浏览器窗口相关，并忽略它所在的任何父级或祖父级，这就是它一直停留在同一个地方的原因。如果您的页面有很多内容使页面更高，您会滚动并且该元素将保持在同一个位置。

  • 将其切换为 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;
}
<!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>

【讨论】：

    【解决方案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 进行块级格式化，而是在 .topnav css 中添加 display: flow-root。

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

    【讨论】：

      猜你喜欢
      • 1970-01-01
      • 2017-03-14
      • 2018-11-02
      • 1970-01-01
      • 1970-01-01
      • 2020-10-03
      • 1970-01-01
      • 2019-03-08
      • 2020-07-23
      相关资源
      最近更新 更多
      热门标签
      Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode