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

Question

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

Asked 6 years, 3 months ago

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.

2

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

2018/03/21 at 04:06
@Victorstafusa actually is position: fixed

– Andrei Coelho

2018/03/21 at 04:20
But this is the real estate.

– Andrei Coelho

2018/03/21 at 04:21
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.

– Victor Stafusa

2018/03/21 at 04:22
@Victorstafusa understood... I thought it was the most appropriate Fixed. = ) I’ll take a better look.

– Andrei Coelho

2018/03/21 at 04:24
Top:0; position:Sticky

– edson alves

2018/03/21 at 11:01

Show 1 more comment

1 answer

Browser other questions tagged javascript html css

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

by hugocsl • **65,517** points · Answer 1 · 2018-03-21T11:30:22+00:00

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