小贝子编程

如何在不相互交叉的情况下制作粘性侧边栏

  • 本文关键字：情况下 侧边栏 html css
  • 更新时间 :
  • 英文 :


我有两个粘性的导航栏。问题是它们都在页面的左上角相交，并且侧面导航栏与顶部相交，从而阻止了按钮。我尝试增加填充，但两个导航栏相交的地方仍然有一个看不见的空间。我想做的是将侧栏放在顶部栏下方，并且它们不会相交并阻止按钮的一部分。这是我到目前为止的代码：

.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: '0bb';
  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: '0bb';
  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>

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: '0bb';
  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;
    margin-top: 83px;
}
.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>

使用 margin-top 而不是 padding-top 。

试试这个更改 top 的值

.icon-bar {
    height: 100%;
    width: 90px;
    position: fixed;
    z-index: 1;
    top: 84px;
    left: 0;
    background-color: #555;
    overflow-x: hidden;
    padding-top: 0px;
}

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium