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:
After scroll/resize:
I wanted it to start before the section with the tickers (ibovespa, dolar, etc), like this:
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;
}