0

How to position a top menu as fixed, such that when we scroll, the menu doesn't move?

This doesn't work:

body { overflow-y: scroll; }
#header { position:fixed; width:100%; height:50px; background-color:yellow; }
#container { padding-top: 60px; }
<div id="header">Bonjour</div>
<div id="container">Blah<br>Blah<br>Blah<br>Blah<br>Blah<br>Blah<br>Blah<br>Blah<br>Blah<br>Blah<br>Blah<br>Blah<br>Blah<br>Blah<br>Blah<br>Blah<br>Blah<br>Blah<br>Blah<br>Blah<br>Blah<br></div>
Basj
  • 41,386
  • 99
  • 383
  • 673

2 Answers2

0

When I unterstand you right this question solve the same problem. Using jQuery to keep scrolling object within visible window

Sorry for the short answer but I am only on my iPad.

Community
  • 1
  • 1
Jan Franta
  • 1,691
  • 2
  • 16
  • 25
  • Eeer, although this may be a valid duplicate question (haven't verified it matches the OP's intent), the proper way to indicate it as such is by clicking "flag" under the question, and marking it as a duplicate. Please don't write an answer that only points to another Stack Overflow question! Thanks for your involvement in this site, though. – Serlite May 10 '16 at 21:05
  • (Sorry, my question is a pure non-sense. To be deleted.) – Basj May 10 '16 at 21:17
0

First of all, I'm not sure I understand your request.

As I get it, your code is working pretty well. The main reason you don't see it, might be big screen (not enough to be scrolled to).

The value that you put on body overflow-y: scroll doesn't help you at all, as that's a default for the <body> tag.

Now, in order to force some scrolling in body, you need to set some height or min-height to it, which is at least longer than your browser window height.

Example:

body {
    min-height: 2000px;
}

Otherwise, the code that you wrote works fine to stick the #header to always be in that position.

Ardian
  • 408
  • 2
  • 11
  • (Sorry, my question is a pure non-sense. To be deleted.) – Basj May 10 '16 at 21:17
  • If you want to stick an element during the scroll, then it's not possible via CSS, as you have to do this via JS or jQuery events! – Ardian May 10 '16 at 21:20