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

回答1:

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

回答2:

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/

来源：https://stackoverflow.com/questions/24878582/html-fixed-header-bar-when-scroll