CODEWITHSUNDEEP
htmlcsscss-position
Eric Tseng
Eric Tseng

Reputation: 563

HTML fixed header bar when scroll

I've written an example here

http://jsfiddle.net/R9Lds/

I want a header bar on the top of the page.

<p style="vertical-align: middle; color: white">Head Bar</p>

And when user scrolls down and up, the header bar will always be on the top.

But now it has an issue that the bottom of the page will be cut-off.

Just like the example above, the

"Title 3",

"Content 3.",

"Author: Alex"

will be cut-off.

Anyone has any ideas about this issue?

Thanks in advance.

Eric

Upvotes: 8

Views: 40395

Answers (2)

Dimas Pante
Dimas Pante

Reputation: 2521

You actually can achieve it simpler than that. You only need to set your header div with position: fixed, and a 'push' div to, well... push the content down.

Take a look in this Fiddle

Upvotes: 13

Edward
Edward

Reputation: 1914

You should set your header bar to position: fixed instead.

Example:

div.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

if you are concerned about the top of .home being cut off, you can also add a margin-top

http://jsfiddle.net/R9Lds/1/

Upvotes: 3

Related Questions