OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

position:fixed element just not staying fixed

  • Thread starter Thread starter LANDVOGT
  • Start date Start date
L

LANDVOGT

Guest
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:

Code:
    .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:

Code:
        <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>

Code:
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.
<p>I have a weird problem with a div not staying fixed.</p>
<p>I have this fixed box which works like intended in desktop view:</p>
<p><a href="https://i.sstatic.net/ynGzV.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/ynGzV.png" alt="enter image description here" /></a></p>
<p>In mobile view I want this box to act as a bottom menu bar and it does work in general:
<a href="https://i.sstatic.net/SIiFa.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/SIiFa.png" alt="enter image description here" /></a></p>
<p>But whenever I scroll down, the box does not stay fixed:
<a href="https://i.sstatic.net/ZlSS0.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/ZlSS0.png" alt="enter image description here" /></a></p>
<p>I have no idea why this happens. The css for this box is:</p>
<pre><code> .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;
}
</code></pre>
<p>In the html structure it is in last position and only parents are body and html:</p>
<pre><code> <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>
</code></pre>
<pre><code>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);
}
</code></pre>
<p>I have no idea what is going on here. If you want to take a look at the full code, its online here:</p>
<p><a href="https://b4tt3r.de/neuneu/index.html" rel="nofollow noreferrer">https://b4tt3r.de/neuneu/index.html</a></p>
<p>I went through all kinds of tips how to make it fixed.</p>
<p>z-index, needs a width and a height, needs position:fixed;, tried position:absolute; as well...</p>
<p>Tried to disable all scripts etc, no change.</p>
Continue reading...
 

Latest posts

Online statistics

Members online
0
Guests online
4
Total visitors
4
Ads by Eonads
Top