How i can activate sticky position

Question

try to use position sticky header and position webkit-sticky ,the header didnt move with user when he scroll down ,i use the inline style where the tag could effect direct but didnt work

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
  </head>
  <body>
    <header class="sticky" style="position: -webkit-sticky;position: sticky;border: 2px solid red;">
      <h1>Aqaba First Cohort</h1>
      <nav>
        <a href="">link1</a>
        <a href="">link2</a>
        <a href="">link3</a>
        <a href="">link4</a>
      </nav>
    </header>
    <main>
<section>
    <h1>
        Title Heading
            </h1>
            <p>
                title discription 
            </p>
            <img src="https://dummyimage.com/1000x200/c7bbc7/2b3491" alt="">
</section>
<section>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum, labore quo reiciendis atque, provident earum deleniti fuga ipsam sapiente nisi iusto amet numquam, beatae architecto id. Eius, perspiciatis rem dolore mollitia delectus maiores pariatur, optio saepe veritatis aliquam nesciunt hic nemo voluptate suscipit provident soluta sed dignissimos? Quia tempora molestiae debitis obcaecati voluptas officia nemo quam animi asperiores recusandae voluptate quos, odit ab et similique laboriosam porro iure a ratione ipsa nostrum expedita. Fugiat, iste illum. Fugit harum quo tempora at quae ipsa, ut illo perspiciatis dicta earum in hic cumque? Ea repudiandae, eos nisi perspiciatis minus provident illo expedita harum, inventore doloribus corporis alias. Dolorem ullam cumque enim, modi quasi optio in? Id nam magni excepturi tempora, iure autem enim aut vero dolor deleniti cum minima dicta repellendus sit accusantium non? Earum quia, itaque reprehenderit dicta et iste optio possimus facere obcaecati blanditiis doloremque iure ipsam, cum repellendus enim inventore, repellat nam at saepe rxpedita. Cumque id laboriosam quo temporibus incidunt rerum fugiat delectus, voluptatum odio nostrum iusto ratione sequi suscipit natus.</section>
<section></section>

    </main>
    <footer></footer>
  </body>
</html>

score 1 · Answer 1 · answered Mar 04 '22 at 16:17

1

I recommend taking a look at w3schools great guide about sticky elements here . It looks like the only thing your styling is missing is top: 0; . Good luck!

answered Mar 04 '22 at 16:17

Rani Giterman

708
2
6
17

15Rabi is right, you can refer to [here](https://jsfiddle.net/Halu/8xs41uok/1/), which is example I made. – Watson Chen Mar 04 '22 at 16:26
many thanks I will try it – mona alobisat Mar 04 '22 at 17:15
if it does work, you could accept my answer as the best answer so if other people get stuck with the same problem, they'll know how to fix it :P – Rani Giterman Mar 04 '22 at 17:22
did this new feature, to add top0?? – mona alobisat Mar 04 '22 at 17:27
I'm unsure I understand what you're trying to say... Yes add `top: 0;` to the style property of the header. – Rani Giterman Mar 04 '22 at 17:31
Itry to ask you add top 0 for the position did it new feature for css – mona alobisat Mar 04 '22 at 22:31

score 0 · Answer 2 · answered Mar 04 '22 at 16:48

when we give position , we got some more properties like left,right,top and bottom

paste the below which has top and left property

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
  </head>
  <body>
    <header class="sticky" style="position: -webkit-sticky;position: sticky; top:0; left:0; border: 2px solid red;">
      <h1>Aqaba First Cohort</h1>
      <nav>
        <a href="">link1</a>
        <a href="">link2</a>
        <a href="">link3</a>
        <a href="">link4</a>
      </nav>
    </header>
    <main>
<section>
    <h1>
        Title Heading
            </h1>
            <p>
                title discription 
            </p>
            <img src="https://dummyimage.com/1000x200/c7bbc7/2b3491" alt="">
</section>
<section>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Cum, labore quo reiciendis atque, provident earum deleniti fuga ipsam sapiente nisi iusto amet numquam, beatae architecto id. Eius, perspiciatis rem dolore mollitia delectus maiores pariatur, optio saepe veritatis aliquam nesciunt hic nemo voluptate suscipit provident soluta sed dignissimos? Quia tempora molestiae debitis obcaecati voluptas officia nemo quam animi asperiores recusandae voluptate quos, odit ab et similique laboriosam porro iure a ratione ipsa nostrum expedita. Fugiat, iste illum. Fugit harum quo tempora at quae ipsa, ut illo perspiciatis dicta earum in hic cumque? Ea repudiandae, eos nisi perspiciatis minus provident illo expedita harum, inventore doloribus corporis alias. Dolorem ullam cumque enim, modi quasi optio in? Id nam magni excepturi tempora, iure autem enim aut vero dolor deleniti cum minima dicta repellendus sit accusantium non? Earum quia, itaque reprehenderit dicta et iste optio possimus facere obcaecati blanditiis doloremque iure ipsam, cum repellendus enim inventore, repellat nam at saepe rxpedita. Cumque id laboriosam quo temporibus incidunt rerum fugiat delectus, voluptatum odio nostrum iusto ratione sequi suscipit natus.</section>
<section></section>

    </main>
    <footer></footer>
  </body>
</html>

I believe it was added with CSS3 so it's not super new, but not super old either :) — jarrodwhitley, Mar 04 '22 at 17:55

How i can activate sticky position

2 Answers2