position sticky failing to stick after threshold

Question

I'm attempting to use sticky positioning on one of my elements, but for some reason even if I cross the sticky threshold, my element never sticks to the page.

I've never had issues using it before until now, so I'm not entirely sure why it's not working. I've also attempted various fixes for the flexbox (like specified in other posts), and also messing around with different heights and overflow values with no change.

HTML:

<div class="navigation" id="navigation">
    <div class="navigation-banner"></div>
    <div class="navigation-main"></div>
</div>

CSS:

#navigation{
    position: relative;
    z-index: 1;
}

.navigation-banner{
    color: #fff;
    background: #f17e0e;
    text-align: center;
    font-size: 12px;
    padding: 10px;
}

.navigation-main{
    display: flex;
    position: sticky;
    position: -webkit-sticky;
    top: 0px;

    height: 80px;
    background-color: #fff;
    box-shadow: 0 7px 18px 0 rgb(0 0 0 / 4%);
    box-sizing: border-box;
    align-items: center;
    padding: 0 30px;
}

Working JsFiddle demo for your convenience.

add display:inline to #navigation – Temani Afif Jan 18 '22 at 00:12 — Temani Afif, Jan 18 '22 at 00:12

score 0 · Answer 1 · answered Jan 17 '22 at 22:14

0

You have to add some height in #navigation CSS, I just add height: 800px in #navigation CSS. I hope it'll resolve your issue. Thank You

#navigation{
    position: relative;
    height: 800px;
    z-index: 1;
}

.navigation-banner{
    color: #fff;
    background: #f17e0e;
    text-align: center;
    font-size: 12px;
    padding: 10px;
}

.navigation-main{
    display: flex;
    position: sticky;
    position: -webkit-sticky;
    top: 0px;

    height: 80px;
    background-color: #fff;
    box-shadow: 0 7px 18px 0 rgb(0 0 0 / 4%);
    box-sizing: border-box;
    align-items: center;
    padding: 0 30px;
}

<div class="navigation" id="navigation">
    <div class="navigation-banner"></div>
    <div class="navigation-main"></div>
</div>

answered Jan 17 '22 at 22:14

Hassan Siddiqui

2,799
1
13
22

Unfortunately, this does not work. Also, why would I want my navigation to be 800px? xD – GROVER. Jan 17 '22 at 22:18
Hassan's solution does work, it's just that you can't see it properly as your navigation-main is white on a white background lol.. The only problem was that the '.navigation' container within which your sticky '.navigation-main' sits had no height. – Marco Jan 17 '22 at 22:31
@Marco I'm not thick lol; I know that it wasn't moving because I change the background colour when testing - and it very obviously has a `box-shadow` applied to it. – GROVER. Jan 18 '22 at 00:40

position sticky failing to stick after threshold

1 Answers1