Question

我正在设计我的网站，而我正试图找到一种方法来始终在屏幕上保留标题。

例如，请查看Wikia.com上的this超长页面。请注意，当您滚动页面时，底部的小工具栏会保留在一个位置。但是，滚动到页面底部，您会发现工具栏保持固定位置，直到它不在视野范围内。

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

我尝试在DynamicDrive.com上查看一个示例（搜索Dock内容脚本，因为我无法发布另一个链接），但我发现它对我来说太麻烦了。

有人可以帮我这样做吗？

提前致谢。
〜DragonXDoom

P.S。现在我注意到，提交问题页面右侧的“如何格式化”框有这种效果。

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

Answer 3

如果您希望它即使在用户滚动时（即粘在浏览器窗口的顶部）也会卡在顶部，请使用：

.top-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  margin: 0;
}

或者仅仅是页面：

.top-bar {
  margin: 0;
  width: 100%;
}

Answer 4

您可以使用CSS定位来解决此问题。以下链接说明了您需要的信息。

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

编辑：对不起，我误读了，这些也适用于标题。

http://www.noobcube.com/tutorials/html-css/fixed-header-footer-layout-a-beginners-guide-/

http://davidchambersdesign.com/css-fixed-position-headers/

希望这些帮助。

Answer 5

//header//

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <title><?php echo SITE_NAME; if(isset($page_title)){ echo ' :: '.$page_title;}?></title>
        <meta name="Description" content="<?php echo $SITE_NAME;?>" />
        <meta name="robots" content="all, index, follow" />
        <meta name="distribution" content="global" />
        <link rel="shortcut icon" href="/favicon.ico" />
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        <link href="<?php if(isset($include_file_ext)){ echo $include_file_ext;}?>css/style.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
    <div id="container">
    <div id="header">
    <h1><?php echo SITE_NAME;?></h1>
    </div>
    <div id="navigation">
    <ul>
    <li><a href="/photosharing/">Home</a></li>
    <!--
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Contact us</a></li>-->
    </ul>
    </div>
    <div id="content">

//footer


</div>
<div id="footer">
        Copyright &copy; <?php echo SITE_NAME.' , '.date('Y');?>
    </div>
</body>
</html>

//css
body,td,th {
    font-family: Trebuchet MS, Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #333;
}
body {
    margin-left: 0px;
    margin-top: 30px;
    margin-right: 0px;
    margin-bottom: 0px;
}
.maindiv{ width:690px; margin:0 auto;}
.textbox{ padding:2px 4px; width:200px;}
.submit{ border:solid 1px #008000; background:#008000; color:#FFF; font-weight:bold;}
#container
{
    margin: 0 30px;
    background: #fff;
}

#header
{
    background: #ccc;
    padding: 20px;
}

#header h1 { margin: 0; }

#navigation
{
    float: left;
    width: 100%;
    background: #333;
}

#navigation ul
{
    margin: 0;
    padding: 0;
}

#navigation ul li
{
    list-style-type: none;
    display: inline;
}

#navigation li a
{
    display: block;
    float: left;
    padding: 5px 10px;
    color: #fff;
    text-decoration: none;
    border-right: 1px solid #fff;
}

#navigation li a:hover { background: #383; }

#content
{
    clear: left;
    padding: 20px;
}

#content h2
{
    color: #000;
    font-size: 160%;
    margin: 0 0 .5em;
}

#footer
{
    background: #ccc;
    text-align: right;
    padding: 20px;
    height: 1%;
}

始终保持标题

5 个答案: