保持头部始终在视图中 [英] Keeping a header always in view

问题描述

我正在设计我的网站，我正在尝试找到一种方法来保持标题总是在屏幕上。

I am designing my website and I'm trying to find a way to keep a header always in the screen.

例如， a href =http://community.wikia.com/wiki/Blog:Wikia_Staff_Blog =nofollow>此在Wikia.com上的超长页面。请注意，当您滚动页面时，底部的小工具栏会保留在一个位置。但是，滚动到页面底部，您会发现工具栏保持固定的位置，直到它离开视图。

For an example, take a look at this extra long page on Wikia.com. Notice that when you scroll the page, the little toolbar down the bottom stays in one place. However, scroll to the bottom of the page and you will realize that the toolbar stays in a fixed position until it gets out of view.

这是我想要的做，但反过来。有一个头部保持在网页上的固定位置，但是当它不在视图中时，它在顶部。

This is what I would like to do, but in reverse. Have a header that stays in a fixed position on the web-page, but when it was not in view have it at the top.

我试着看一个例子DynamicDrive.com（搜索Dock Content Script，因为我不能发布另一个链接），但我发现它对我来说太不稳定。

I tried looking at an example on DynamicDrive.com (search for Dock Content Script, because I can't post another link), but I found that it was too jittery for me.

有人可以帮助我这样做吗？

Can someone please help me do this?

提前感谢。

〜DragonXDoom

Thanks in advance.
~DragonXDoom

现在我注意到，提交问题页面右侧的如何格式化框有此效果。

P.S. Now that I notice, the How to Format box on the right of the submit question page has this effect.

推荐答案

HTML： / p>

HTML:

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

JavaScript：

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/simevidas/Mx8hC/show/

这篇关于保持头部始终在视图中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！