I've checked a few post in stack overflow saying that there may be an issue if overflow: hidden or overflow: auto is used with position: sticky. But there is no overflow in my css script and I cannot figure out why my script doesn't work. What I'm trying to do is that when the user scrolls down the page, the horizontal bar should be on top of the page and the vertical bar should fill up the left of the page. The vertical bar doesn't work properly as well but both of them works fine when I'm using position: fixed.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.white-space {
width: 100%;
height: 200px;
}
.hor-navbar ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: black;
position: sticky;
top: 0;
width: 100%;
height: 5%;
}
.hor-navbar ul li {
display: inline-block;
border-right: 1px solid white;
}
.hor-navbar ul li a {
display: block;
padding: 15px;
text-decoration: none;
color: white;
}
.hor-navbar ul li:first-child {
background-color: green;
}
.hor-navbar ul li:last-child {
float: right;
border-right: none;
}
.hor-navbar ul li:not(:first-child) a:hover {
background-color: grey;
}
.ver-navbar ul {
list-style-type: none;
padding: 0;
margin: 0;
background-color: grey;
width: 30%;
height: 95%;
position: sticky;
bottom: 0;
text-align: center;
border: 1px solid black;
}
.ver-navbar ul li {
display: block;
border-bottom: 1px solid black;
}
.ver-navbar ul li a {
display: block;
padding: 30px;
text-decoration: none;
color: black;
}
.ver-navbar ul li:not(:first-child) a:hover {
background-color: black;
color: white;
}
.ver-navbar ul li:first-child {
background-color: green;
color: white;
}
.white-space2 {
width: 70%;
height: 100%;
float: right;
} <!DOCTYPE html>
<html lang="en-US">
<head>
<title>test</title>
<link rel="stylesheet" href="test.css">
<script src="test.js"></script>
<meta charset="UTF-8">
<meta name="keywords" content="test">
<meta name="description" content="test">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1-0">
</head>
<body>
<div class="white-space">
something
</div>
<div class="hor-navbar">
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</div>
<div class="ver-navbar">
<ul>
<li><a href="#">link1</a></li>
<li><a href="#">link2</a></li>
<li><a href="#">link3</a></li>
<li><a href="#">link4</a></li>
</ul>
</div>
<div class="white-space2">
something<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br>
</div>
</body>
</html>
