始终保持标题

Question

我正在设计我的网站,我正试图找到一种方法来始终在屏幕上保持标题.

例如,请查看Wikia.com 上的这个超长页面.请注意,当您滚动页面时,底部的小工具栏会保留在一个位置.但是,滚动到页面底部,您将意识到工具栏保持固定位置,直到它离开视图.

这就是我想做的事情,但反之亦然.有一个标题保持在网页上的固定位置,但当它不在视图中时将它放在顶部.

我试着在DynamicDrive.com上查看一个例子(搜索Dock内容脚本,因为我不能发布另一个链接),但我发现它对我来说太麻烦了.

有人可以帮我这样做吗？

提前致谢.
〜DragonXDoom

PS现在,我注意到,提交问题页面右侧的"如何格式化"框具有此效果.

Answer 1

永远记住你是否必须坚持使用页眉或页脚{ position : fixed; }.

所以应用这样的CSS:

.header{
    top:0;
    width:100%;
    height:50px;
    position:fixed;  // this is the key
}

Answer 2

HTML：

<div id="wrap">
    <div id="header"> HEADER </div>
    <div id="navigation"> NAVIGATION </div>
    <div id="content"> CONTENT  </div>        
</div>

JavaScript：

( function () {    
    var nav = $( '#navigation' )[0],
        top = $( nav ).offset().top,
        left,
        height = $( nav ).outerHeight(),
        width = $( nav ).width(),
        fixedClass = 'fixed';

    function pageOffset() {
        return window.pageYOffset || document.body.scrollTop;
    }

    $( window ).
            resize( function () {
                left = $( nav ).offset().left;
            }).
            scroll( function () {
                $( nav ).toggleClass( fixedClass, pageOffset() > top );

                if ( $( nav ).hasClass( fixedClass ) ) {
                    $( nav ).
                        css({ 'left': left, 'width': width }).
                        prev().css({ 'marginBottom': height });
                } else {
                    $( nav ).
                        prev().andSelf().removeAttr( 'style' );
                }
            }).
            trigger( 'resize' );    
})();

现场演示： http: //jsfiddle.net/simvidas/Mx8hC/show/