Question 169308 in Html Question posted in
Some basic documentation can be found here.

Why isn’t my sticky position working in HTML?

This is my code.
I’m using bootstrap.
i don’t know why but it’s not working.
I just set top position to 0 but still not working.
any idea?
Header:

<style>
    .background-nav {
        background: #58585858;
        backdrop-filter: blur(45px);
        border: 3px solid #808080;
    }
    .t-0 {
        top: 0;
    }
</style>
<div class="w-100">
    <div class="row justify-content-around position-sticky t-0 p-0 m-0">
        <div class="col-2 text-center p-2 rounded-2 position-sticky t-0 mt-3 background-nav">Home</div>
        <div class="col-7 text-center p-2 rounded-2 position-sticky t-0 mt-3 background-nav">Search</div>
        <div class="col-2 text-center p-2 rounded-2 position-sticky t-0 mt-3 background-nav">Music</div>
    </div>
</div>

Main Code:

<div id="navbar"></div>
<section>
    <a href="http://localhost:3000/login">login</a>
</section>
<button style="background: red; color: white" id="Shutdown">SHUTDOWN</button>
<div class="meow">.</div>
<div class="meow">....</div>
<div class="meow">....</div>
<div class="meow">....</div>
<div class="meow">....</div>
<div id="footer"></div>

top code will be replaced with #navbar
and this is css for main code

.meow {
            height: 5000px;
            width: 200px;
            display: block;
            background: red;
        }

I tried setting top to 0 or set position to sticky from the element with !important tag

Tags:

2

Answers


  1. 0

    To be sticky the element has to be in a scroll container.
    So try to wrap your nav and the context inside a div and say overflow: auto
    then position: sticky and top: 0 on the nav should do the trick.
    and probably z-index: 2 and ‘background: white` so the nav will be in front and don’t look through,

    More to read on mdn position

    Login or Signup to reply.
  2. 0

    Wrap your elements in a container first becuase boostrap adds additional css properties. so do this…

    <style>
    #container{
      position: sticky; top: 0;
    }
    .background-nav {
        background: #58585858;
        backdrop-filter: blur(45px);
        border: 3px solid #808080;
    }
    .t-0 {
        top: 0;
    }
</style>

<div id="container">
<div class="w-100">
    <div class="row justify-content-around position-sticky t-0 p-0 m-0">
        <div class="col-2 text-center p-2 rounded-2 position-sticky t-0 mt-3 background-nav">Home</div>
        <div class="col-7 text-center p-2 rounded-2 position-sticky t-0 mt-3 background-nav">Search</div>
        <div class="col-2 text-center p-2 rounded-2 position-sticky t-0 mt-3 background-nav">Music</div>
    </div>
</div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search