0

Im setting a header that changes its appearance when the user scrolls down or when the window is minimized, the javascript works as it should but the header is getting in front of everything (because of its fixed position), is there any way I can keep it fixed but starting before the other elements? Here is the pictures:

Before scroll/resize:

enter image description here

After scroll/resize:

enter image description here

I wanted it to start before the section with the tickers (ibovespa, dolar, etc), like this:

enter image description here

HTML:

<body>
<div class="header" id="navbar">
    <nav>
        <ul>
        <img class="logo" src="caf_logo.png"></img>
        <a href="/index.php">
        <li>
            <span class="navitemssp" id="navbar"><h1>Cafinvest</h1><h2>Home</h2></span>
        </li>
        </a>
        <a href="/empresas_listadas.php">
        <li>
            <span class="navitemssp" id="navbar"><h2>Empresas Listadas</h2></span>
        </li>
        </a>
        <a href="/cryptosniffer.php">
        <li>
            <span class="navitemssp" id="navbar"><h2>Farejador Cripto</h2></span>
        </li>
        </a>
        <a href="/b3sniffer.php">
        <li>
            <span class="navitemssp" id="navbar"><h2>Farejador B3</h2></span>
        </li>
        </a>
        </ul>
    </nav>
</div>
<div class="parent">
    <div class="majorindexes">
    <table class="indexes">
    <?php
    while($row = $result->fetch_assoc())
    {
        if($row["Variação"]>0)
        {
            $variação=number_format($row["Variação"],2,',','.');
            $linvar="<td class='positive'>".$row['Display']."<br>".$variação."%"."</td>";
        }
        else
        {
            $variação=number_format($row["Variação"],2,',','.');
            $linvar="<td class='negative'>".$row['Display']."<br>".$variação."%"."</td>";
        }
        echo $linvar;
    }
}
?>
    </table>
    </div>
</div>
....
</body>

The javascript:

<script>
let header = document.querySelector(".header");
window.onscroll=function()
{
    if (document.documentElement.scrollTop >280)
    {
        if(header.classList.contains("active"))
        {
        }
        else
        {
            header.classList.toggle("active");
        }
    }
    if (document.documentElement.scrollTop == 0 && header.classList.contains("active") && window.innerWidth >= 512)
    {
        header.classList.toggle("active");
    }
}
if (window.innerWidth < 512)
{
    header.classList.toggle("active");
}
window.addEventListener("resize", function ()
{
    if(!header.classList.contains("active") && window.innerWidth < 512)
    {
        header.classList.toggle("active");
    }
    else if(header.classList.contains("active") && window.innerWidth >= 512 && document.documentElement.scrollTop == 0)
    {
        header.classList.toggle("active");
    }
    else
    {
    }
});
</script>

Header:

div.header
{
text-align: center;
padding: 2px 2px;
border-radius: 5px;
background-image: linear-gradient(to bottom right, #fff2cc, #c68c53);
z-index: 100;
margin-bottom: 10px;
letter-spacing: 2px;
}
div.header.active
{
left: 0;
right: 0;
opacity: 0.5;
border-radius: 10px;
position: fixed;
}

The first section after the header:

div.parent
{
position: relative;
overflow: hidden;
outline-style: solid;
width: 100%;
text-align: center;
background-color: black;
opacity: 0.7;
display: flex;
border-radius: 5pt;
margin-bottom: 10px;
}
3
  • Z-Index would change the element on top, I wanted it to begin before, I edited the post with how I would like it to look like.
    – Capuccino
    Mar 9, 2022 at 17:04
  • Sorry, still don't get it. I have no idea what you actually want now.
    – CBroe
    Mar 10, 2022 at 7:25

2 Answers 2

0

Use position sticky instead of fixed

div.header.active
{
left: 0;
right: 0;
opacity: 0.5;
border-radius: 10px;
position: sticky;
}
1
  • Thanks! But the problem with sticky is that it stops after the first element, it doesn't follow through the whole page.
    – Capuccino
    Mar 9, 2022 at 14:55
0

Ive made a improvisation that works for now, its not exactly how I wanted but Ill leave this answer here, Ive created a "Fake" div that activates with the header, so it serves as a "placeholder":

HTML:

<div class="header" id="navbar">
    <nav>
        <ul>
        <img class="logo" src="caf_logo.png"></img>
        <a href="/index.php">
        <li>
            <span class="navitemssp" id="navbar"><h1>Cafinvest</h1><h2>Home</h2></span>
        </li>
        </a>
        <a href="/empresas_listadas.php">
        <li>
            <span class="navitemssp" id="navbar"><h2>Empresas Listadas</h2></span>
        </li>
        </a>
        <a href="/cryptosniffer.php">
        <li>
            <span class="navitemssp" id="navbar"><h2>Farejador Cripto</h2></span>
        </li>
        </a>
        <a href="/b3sniffer.php">
        <li>
            <span class="navitemssp" id="navbar"><h2>Farejador B3</h2></span>
        </li>
        </a>
        </ul>
    </nav>
</div>
<div class="fake">
</div>
...

CSS:

div.fake
{
visibility: hidden;
}
div.fake.active
{
visibility: visible;
background-image: linear-gradient(to bottom right, #fff2cc, #c68c53);
height: 110px;
margin-bottom: 10px;
}

Javascript:

<script>
let header = document.querySelector(".header");
let fake = document.querySelector(".fake");
window.onscroll=function()
{
    if (document.documentElement.scrollTop >280)
    {
        if(header.classList.contains("active"))
        {
        }
        else
        {
            header.classList.toggle("active");
        }
        if(fake.classList.contains("active"))
        {
        }
        else
        {
            fake.classList.toggle("active");
        }
    }
    if (document.documentElement.scrollTop == 0 && header.classList.contains("active") && window.innerWidth >= 512)
    {
        header.classList.toggle("active");
    }
    if (document.documentElement.scrollTop == 0 && fake.classList.contains("active") && window.innerWidth >= 512)
    {
        fake.classList.toggle("active");
    }
}
if (window.innerWidth < 512)
{
    header.classList.toggle("active");
    fake.classList.toggle("active");
}
window.addEventListener("resize", function ()
{
    if(!header.classList.contains("active") && window.innerWidth < 512)
    {
        header.classList.toggle("active");
    }
    else if(header.classList.contains("active") && window.innerWidth >= 512 && document.documentElement.scrollTop == 0)
    {
        header.classList.toggle("active");
    }
    else
    {
    }
    if(!fake.classList.contains("active") && window.innerWidth < 512)
    {
        fake.classList.toggle("active");
    }
    else if(fake.classList.contains("active") && window.innerWidth >= 512 && document.documentElement.scrollTop == 0)
    {
        fake.classList.toggle("active");
    }
    else
    {
    }
});
</script>

Result:

enter image description here

Thanks for the answers anyway!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.