html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0;
}
section{
width: 100%;
height: auto;
position: relative;
}
p {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 20px 80px;
}
.cor h1 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #fff;
text-align: center;
margin: 0;
padding: 0;
height: 50px;
}
.cor {
font-size: 32px;
background-color: red;
position: sticky;
z-index: 11;
top: 0px;
}
<header>
<h3>Meu header</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
</header>
<section>
<nav class="cor"><h1>NavBar #1</h1></nav>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Illum praesentium iste quia provident nemo dolore assumenda illo commodi! Repellendus quibusdam hic doloribus commodi, quis culpa possimus incidunt perspiciatis aperiam quidem.</p>
</section>
Try using the CSS property
position: sticky
. You find more about her at this link: https://www.w3schools.com/css/css_positioning.asp– Victor Stafusa
@Victorstafusa actually is
position: fixed
– Andrei Coelho
But this is the real estate.
– Andrei Coelho
@Andreicoelho
position: fixed
andposition: sticky
are similar but are different. What the author of the question seems to be wanting is thesticky
.– Victor Stafusa
@Victorstafusa understood... I thought it was the most appropriate Fixed. = ) I’ll take a better look.
– Andrei Coelho
Top:0; position:Sticky
– edson alves