html - 滚动时下拉菜单未连接到粘性导航栏
问题描述
我做了一个标题，下面是一个带有下拉菜单的粘性导航栏。
当我激活下拉菜单时，它与导航栏完美契合。但是，如果我在不再适合的网站上向下滚动，导航栏和下拉菜单之间的距离等于我的标题高度。
向下滚动时，标题是否按下了我的下拉菜单？还是从网站顶部向下滚动到在网站上向下滚动时保持存在的下拉菜单的距离？
我已经尝试修复它好几天了，但我无法让它工作。
/* 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>
解决方案
position: fixed;on导致该.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;
}<!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>推荐阅读
- oracle - Oracle 插入语句的工作原理
- ios - swift: 改变 UIView 的大小
- laravel - 在同一控制器 Laravel 中将变量从一种方法传递到另一种方法
- django - Django ORM DateTimeField ExpressionWrapper QuerySet 注释
- java - 如何重写文档文件
- javascript - 使用 RegExp 提取特殊字符序列之间的值
- c# - 访问网格顶点性能问题
- php - Joomla / 图书馆 / 作曲家
- react-native - React Navigation：是否可以使用参数 goBack() 或 pop()？
- redhat - cacti rrd 文件 - NaN 值