Advertisements
I’ve been writing some code for my project and I’m stuck at a point where I can’t fix(stick) my progress bar div at the top of the page when it is scrolled down and navbar gets hidden. Can someone get to this and help me?
The code is :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
::selection {
background: chocolate;
}
#profile-main {
background-color: #E5CBC3;
height: 1500px;
width: 100%;
display: flex;
align-items: center;
/* justify-content: center; */
flex-direction: column;
}
#navbar {
display: flex;
padding: 20px;
width: 80vw;
align-items: center;
/* height: 4px; */
/* background-color: red; */
justify-content: space-between;
}
#navbar #logo a {
text-decoration: none;
}
#navbar #logo a h3 {
font-family: 'Courier New', Courier, monospace;
font-size: 25px;
color: black;
transition: all ease 0.9s;
}
#navbar #logo a h3:hover {
text-decoration: underline;
/* line-height: 1.5rem; */
}
#navbar #text-nav h3 {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 400;
font-size: 20px;
}
#navbar #buttons button {
background-color: black;
color: white;
padding: 10px 25px;
border-radius: 4px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 400;
border: none;
position: relative;
/* background-color: #04AA6D; */
/* border: none; */
/* font-size: 28px; */
color: #FFFFFF;
/* padding: 20px; */
/* width: 200px; */
text-align: center;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
/* animation */
#navbar #buttons button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
#navbar #buttons button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
#navbar #buttons button:hover span {
padding-right: 25px;
}
#navbar #buttons button:hover span:after {
opacity: 1;
right: 0;
}
#progress-bar {
margin-top: 40px;
width: 80%;
background-color: rgb(104, 171, 230);
height: 200px;
}
#main-content {
display: flex;
background-color: rgb(252, 146, 146);
width: 80%;
height: 100%;
display: flex;
flex-direction: column;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile setup</title>
<link rel="stylesheet" href="profile-setup.css">
</head>
<body>
<div id="profile-main">
<div id="navbar">
<div id="logo">
<a href="#">
<h3>Autumn.</h3>
</a>
</div>
<div id="text-nav">
<h3>Setup your Profile</h3>
</div>
<div id="buttons">
<button><span>Sign up / Log in</span></button>
</div>
</div>
<div id="progress-bar">
bar
</div>
<div id="main-content">
main content
</div>
</div>
<script src="profile-setup.js"></script>
</body>
</html>I tried giving it a fixed position , trial and error with z-index and tried other things too, like with the position attribute, but nothing helps!!
>Solution :
To achieve the result you are aiming to you just need to add the following css rule:
#progress-bar {
position: sticky;
top: 0;
}
https://developer.mozilla.org/en-US/docs/Web/CSS/position
sticky The element is positioned according to the normal flow of the
document, and then offset relative to its nearest scrolling ancestor
and containing block (nearest block-level ancestor), including
table-related elements, based on the values of top, right, bottom, and
left. The offset does not affect the position of any other elements.
And this is why you needed to set the top property:
Note: At least one inset property (top, inset-block-start, right,
inset-inline-end, etc.) needs to be set to a non-auto value for the
axis on which the element needs to be made sticky. If both inset
properties for an axis are set to auto, on that axis the sticky value
will behave as relative.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html,
body {
width: 100%;
height: 100%;
}
::selection {
background: chocolate;
}
#profile-main {
background-color: #E5CBC3;
height: 1500px;
width: 100%;
display: flex;
align-items: center;
/* justify-content: center; */
flex-direction: column;
}
#navbar {
display: flex;
padding: 20px;
width: 80vw;
align-items: center;
/* height: 4px; */
/* background-color: red; */
justify-content: space-between;
}
#navbar #logo a {
text-decoration: none;
}
#navbar #logo a h3 {
font-family: 'Courier New', Courier, monospace;
font-size: 25px;
color: black;
transition: all ease 0.9s;
}
#navbar #logo a h3:hover {
text-decoration: underline;
/* line-height: 1.5rem; */
}
#navbar #text-nav h3 {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 400;
font-size: 20px;
}
#navbar #buttons button {
background-color: black;
color: white;
padding: 10px 25px;
border-radius: 4px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-weight: 400;
border: none;
position: relative;
/* background-color: #04AA6D; */
/* border: none; */
/* font-size: 28px; */
color: #FFFFFF;
/* padding: 20px; */
/* width: 200px; */
text-align: center;
transition-duration: 0.4s;
text-decoration: none;
overflow: hidden;
cursor: pointer;
}
/* animation */
#navbar #buttons button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
#navbar #buttons button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
#navbar #buttons button:hover span {
padding-right: 25px;
}
#navbar #buttons button:hover span:after {
opacity: 1;
right: 0;
}
#progress-bar {
margin-top: 40px;
width: 80%;
background-color: rgb(104, 171, 230);
height: 200px;
}
#main-content {
display: flex;
background-color: rgb(252, 146, 146);
width: 80%;
height: 100%;
display: flex;
flex-direction: column;
}
#progress-bar {
position: sticky;
top: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Profile setup</title>
<link rel="stylesheet" href="profile-setup.css">
</head>
<body>
<div id="profile-main">
<div id="navbar">
<div id="logo">
<a href="#">
<h3>Autumn.</h3>
</a>
</div>
<div id="text-nav">
<h3>Setup your Profile</h3>
</div>
<div id="buttons">
<button><span>Sign up / Log in</span></button>
</div>
</div>
<div id="progress-bar">
bar
</div>
<div id="main-content" style="white-space: pre;">
main content
very very long content you can scroll vertically
...
...
...
...
...
...
...
...keep going...
...
...
...
...
...
...
...
</div>
</div>
<script src="profile-setup.js"></script>
</body>
</html>