Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Ubuntu – How to fix a div on the top of the webpage when it's scrolled down?

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

Tags:

2

Answers


  1. 0

    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: '0bb';
  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>
    Login or Signup to reply.
  2. 0

    Adjusting #progress-bar to include position:sticky styling would be a case.
    Also, keep in mind, following the hint in documentation, that you need to include:

    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.

    In this case, it would be replacing margin-top: 40px; to top: 40px;

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search