Search code examples
cssfixed

position:fixed element just not staying fixed

I have a weird problem with a div not staying fixed.

I have this fixed box which works like intended in desktop view:

enter image description here

In mobile view I want this box to act as a bottom menu bar and it does work in general: enter image description here

But whenever I scroll down, the box does not stay fixed: enter image description here

I have no idea why this happens. The css for this box is:

    .scrollnav {
        min-height:100vh;
        height: 100vh;
        left:0;
        right:0;
        bottom: 0;
        top:7vh !important;
        transform: translateY(0);
        padding:0;
        position: fixed;
        margin:0;
        width:100vw;
        font-size:16px;
        z-index:9999;
        pointer-events: none;
        display: block;
        justify-content: center;
        padding-left:2vw;
        align-items: bottom;
    }

    .dots {
        width:95vw;
        left:2vw;
        bottom:0;
        margin-top:-3vh;
        height:11vh;
        position: absolute;
        display: block;
        padding-top:2vh;
        pointer-events:all;
    }

In the html structure it is in last position and only parents are body and html:

        <div class="scrollnav">
            <ul class="dots">
                <li class="active"><a href="#one">Home</a></li>
                <li><a href="#two">Experience</a></li>
                <li><a href="#three">Portfolio</a></li>
                <li><a href="#four">Clients</a></li>
                <li><a href="#five">Contact</a></li>
            </ul>
        </div>
    </body>
</html>

html, body {
    all: unset;
    block-size: 100%;
    font-family: 'Barlow';
    font-size: 100%;
    margin: 0;
    scroll-snap-type: both mandatory;
    scroll-behavior: smooth;
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    background: var(--dark);
}

I have no idea what is going on here. If you want to take a look at the full code, its online here:

https://b4tt3r.de/neuneu/index.html

I went through all kinds of tips how to make it fixed.

z-index, needs a width and a height, needs position:fixed;, tried position:absolute; as well...

Tried to disable all scripts etc, no change.

Solution

  • In the viewport <meta> tag under <head>, adding minimum-scale=1.0 works on my mobile on Google Chrome.

    It seems like in your website some of the components’ width is over 100vw, which somehow causes this problem.

    <head>
    <meta name="viewport" content="height=device-height,
          width=device-width, initial-scale=1.0,
          minimum-scale=1.0">
<head>

    In addition, you can try to remove Top:7vh and translateY, and just use bottom:0 (or what ever distance you prefer). If both Top and Height are specified, bottom will be ignored. Also, translate() doesn't work well with position:fixed since it will translate the position after the position is fixed, which might cause problem.