我有两个粘性导航栏。问题是它们都在页面的左上角相交，侧面导航栏与顶部导航栏相交，挡住了按钮。我试过增加填充，但两个导航栏相交处仍然有一个看不见的空间。我想要做的是让侧边栏位于顶部栏下方，并且它们不会相交并阻挡按钮的一部分。到目前为止，这是我的代码:
.button {
display: inline-block;
border-radius: 4px;
background-color: #4CAF50e;
border: none;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
body {margin:10}
.icon-bar {
height: 100%;
width: 90px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #555;
overflow-x: hidden;
padding-top: 0px;
}
.icon-bar a {
text-align: center;
padding: 6px 8px 6px 16px;
transition: all 0.3s ease;
text-decoration: none;
font-size: 36px;
color: #white;
display: block;
}
.icon-bar a:hover {
background-color: #4289b5;
}
.active {
background-color: #4CAF50 !important;
}
.mainsbar {
margin-left: 160px; /* Same as the width of the sidenav */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
@media screen and (max-height: 450px) {
.icon-bar {padding-top: 15px;}
.icon-bar a {font-size: 18px;}
}
body{
font-size: 20px;
font-family: Roboto;
font-weight: 300;
}
a{
text-decoration: none;
;
padding: 10px 15px;
line-height: 3;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
a:hover{
color: #FFF;
background: #FC2121;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
body {margin:0;}
.icon-bartop {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
background-color: #555;
overflow: auto;
}
.icon-bartop a {
float: left;
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
.icon-bartop a:hover {
background-color: #000;
}
.active {
background-color: #4CAF50 !important;
}
.main {
padding: 0px;
margin-top: 80px;
height: 1500px; /* Used in this example to enable scrolling */
}<!DOCTYPE html>
<html>
<body>
<html lang="en">
<head>
<title>Web Scraper</title>
<script src="https://cdn.jsdelivr.net/npm/sweetalert"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/scripts.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="background-color:#7f8fa8;">
<div class="main">
<div class="icon-bartop">
<a href="#"><i class="fa fa-home"></i></a>
<a href="#news"><i class="fa fa-newspaper"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-globe"></i></a>
<a href="#"><i class="fa fa-trash"></i></a>
</div>
<div id="home">
<div class="sidebar">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="icon-bar">
<a class="active" href="#search"><i class="fa fa-search"></i></a>
<a href="javascript:getPrices();"><i class="fa fa-bitcoin"></i></a>
<a href="https://www.google.com/maps/"><i class="fa fa-map"></i></a>
<a href="https://www.wolframalpha.com/"><i class="fa fa-anchor"></i></a>
<a href="https://www.amazon.com/"><i class="fa fa-shopping-cart"></i></a>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<!-- Search Form -->
</div>
<div id="news">
<h1 align="center">Test</h1>
</div>
</div>
</body>
</html>最佳答案
您可以将您的最高位置设置为 84px...因为您使用的是固定位置并且您可以使用 cal() 计算您的高度..
console.log('Loading').button {
display: inline-block;
border-radius: 4px;
background-color: #4CAF50e;
border: none;
text-align: center;
font-size: 28px;
padding: 20px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
body {margin:10}
.icon-bar {
height: calc(100% - 84px);
width: 90px;
position: fixed;
z-index: 1;
top: 84px;
left: 0;
background-color: #555;
overflow-x: hidden;
padding-top: 0px;
}
.icon-bar a {
text-align: center;
padding: 6px 8px 6px 16px;
transition: all 0.3s ease;
text-decoration: none;
font-size: 36px;
color: #white;
display: block;
}
.icon-bar a:hover {
background-color: #4289b5;
}
.active {
background-color: #4CAF50 !important;
}
.mainsbar {
margin-left: 160px; /* Same as the width of the sidenav */
font-size: 28px; /* Increased text to enable scrolling */
padding: 0px 10px;
}
@media screen and (max-height: 450px) {
.icon-bar {padding-top: 15px;}
.icon-bar a {font-size: 18px;}
}
body{
font-size: 20px;
font-family: Roboto;
font-weight: 300;
}
a{
text-decoration: none;
;
padding: 10px 15px;
line-height: 3;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
a:hover{
color: #FFF;
background: #FC2121;
-webkit-transition: all .3s ease;
-moz-transition: all .3s ease;
-ms-transition: all .3s ease;
-o-transition: all .3s ease;
transition: all .3s ease;
}
body {margin:0;}
.icon-bartop {
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
background-color: #555;
overflow: auto;
}
.icon-bartop a {
float: left;
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 20px;
}
.icon-bartop a:hover {
background-color: #000;
}
.active {
background-color: #4CAF50 !important;
}
.main {
padding: 0px;
margin-top: 80px;
height: 1500px; /* Used in this example to enable scrolling */
}<!DOCTYPE html>
<html>
<body>
<html lang="en">
<head>
<title>Web Scraper</title>
<script src="https://cdn.jsdelivr.net/npm/sweetalert"></script>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="js/scripts.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="background-color:#7f8fa8;">
<div class="main">
<div class="icon-bartop">
<a href="#"><i class="fa fa-home"></i></a>
<a href="#news"><i class="fa fa-newspaper"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-globe"></i></a>
<a href="#"><i class="fa fa-trash"></i></a>
</div>
<div id="home">
<div class="sidebar">
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="icon-bar">
<a class="active" href="#search"><i class="fa fa-search"></i></a>
<a href="javascript:getPrices();"><i class="fa fa-bitcoin"></i></a>
<a href="https://www.google.com/maps/"><i class="fa fa-map"></i></a>
<a href="https://www.wolframalpha.com/"><i class="fa fa-anchor"></i></a>
<a href="https://www.amazon.com/"><i class="fa fa-shopping-cart"></i></a>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:300' rel='stylesheet' type='text/css'>
<!-- Search Form -->
</div>
<div id="news">
<h1 align="center">Test</h1>
</div>
</div>
</body>
</html>关于html - 如何制作粘性侧边栏而不相互交叉，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49797087/