滚动时HTML固定标题栏 [英] HTML fixed header bar when scroll

问题描述

我在这里写了一个例子

http：/ /jsfiddle.net/R9Lds/

我需要页面顶部的标题栏。

 < p style =vertical-align：middle; color：white>头栏< / p> 
  

当用户向下滚动时，标题栏始终位于顶部。

但现在有一个问题，即页面底部会被截断。

就像上面的例子，

标题3，

<内容3>，

Author：Alex

将被截断。

任何人对此问题有任何想法？

预先致谢。

Eric

解决方案

您实际上可以实现它比这更简单。你只需要用 position：fixed 和一个'push'div来设置你的头div，好吧...把内容压下。

看看这个小提琴

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

解决方案

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

这篇关于滚动时HTML固定标题栏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！