I have a site with a menu that is below my header , 150px below the top of the screen.
I would like to make when I rolled the page and the menu of the site reached the position 0 of the top it was fixed and rolled the rest of the content of my site.
For this you can use position:sticky and notice that you need a z-index set so the content does not stay over the bar. Here's a link to the documentation: link
I'll give you a practical template that I think will help you. Note that when the bar reaches the top it will stay fixed, but when it rolls down it will move. No need for Javascript is pure CSS
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;
}
h1 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
color: #fff;
text-align: center;
background-color: black;
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>
<h1 class="cor">Barra #2</h1>
<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>Here you can check which Browsers accept the position: sticky link