would like to know how I put this fixed header equal to the menu of this site next to logo

Asked

Viewed 61 times

-2

I want my page header (logo menu etc.) to stay fixed when scrolling the page down. Also the menu with logo of that site (Stackoverflow), that when I roll the screen it stays in the same place. I would like a template in html and css, I have no idea how it works.

javascript html css
  • 2

    Try using the CSS property position: sticky. You find more about her at this link: https://www.w3schools.com/css/css_positioning.asp

  • @Victorstafusa actually is position: fixed

  • But this is the real estate.

  • 1

    @Andreicoelho position: fixed and position: sticky are similar but are different. What the author of the question seems to be wanting is the sticky.

  • @Victorstafusa understood... I thought it was the most appropriate Fixed. = ) I’ll take a better look.

  • Top:0; position:Sticky

Show 1 more comment

1 answer

2

There are several questions similar to yours. However I think none addresses the difference between position:sticky and position:fixed

position:Fixed: always secure an element in some position in your scroll container or viewport. No matter how you roll your container, it will remain in the same position and will not affect the flow of other elements within the container.

position:Sticky: without going into specific details, position:sticky basically acts as position:relative until an element is rolled beyond a specific displacement, in which case it becomes position: Fixed, causing the element to "stick" in its position instead of being rolled out of sight. It eventually loosens when it is rolled back to its original position. At least, that’s how I understand it in theory. OBS: position:sticky is still an experimental class and does not work in IE, initially developed to create menus and headers to optimize websites and systems for mobile devices where we can have a scroll very long vertical. https://caniuse.com/#feat=css-Sticky

Example of using Menu with position:Sticky

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>

Example of using Menu with position:Fixed

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0;
}
body {
    padding-top: 60px;
}
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;
    line-height: 50px;
}
.cor {
    font-size: 32px;
    background-color: red;
    z-index: 9;
}
.topo {
    position: fixed;
    width: 100%;
    z-index: 10;
    top: 0;
  
<nav class="topo"><h1>Menu #1</h1></nav>
<section>
    <h3>Teste barra</h3>
    <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>
<section>
    <h1 class="cor">teste #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>
</section>

Official documentation W3C: https://www.w3.org/TR/css-position-3/#position-Property

Documentation Mozilla: https://developer.mozilla.org/en-US/docs/Web/CSS/position

Text source: https://stackoverflow.com/questions/19501919/difference-between-positionsticky-and-positionfixed

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.