Question

我找到了这个用于制作HTML固定标题的HTML代码：

<!DOCTYPE HTML>
<html lang="en">
   <head>
    <meta http-equiv="Content-Type" content="text/html"/>
    <meta charset="utf-8"/>
    <title>NavBar</title>
    <link rel="stylesheet" type="text/css" href="style.css"/>
</head>
<body>
<div id="navigation">
    <div class="center">
        <div class="logo">
        <h1>Logo</h1>
    </div>
    <ul class="right">
        <li><a href="#">Home</a></li>
        <li><a href="#">Portfolio</a></li>
        <li><a href="#">Our Apps</a></bli>
        <li><a href="#">Support</a></li>
        <li><a href="#">Press</a></li>
        <li><a href="#">About</a></li>
    </ul>
    </div>
</div>
<div id="content">
    <hgroup>
        <h1>Hello</h1>
        <h2>Hello again</h2>
        <h3>And Again!</h3>
    </hgroup>
    <article>
        <section>
            <p>Testo Testo Testo Testo Testo Testo Testo Testo Testo     Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo </p>
        </section>
                    <section>
            <p>Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo </p>
        </section>
                        <section>
            <p>Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo </p>
        </section>          <section>
            <p>Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo Testo </p>
        </section>
    </article>
</div>
    </body>
   </html>

这是style.css文件：

        body {
            padding:0;
            margin:0;
            font-family: Helvetica, Arial, sans-serif;
            font-size:12px;
    }
    #navigation {
            position:fixed;
            display:block;
            top: 0;
            width: 100%;
            height:35px;
            padding-top: 15px;
            -webkit-box-shadow: 0px 0px 8px 0px #000000;
            background-color: rgba(1,1,1,0.8);
            color:rgba(1,1,1,0.8);
            border-bottom:1px solid black;
    }

    .center {width: 1000px; margin: 0 auto;}

    div.logo {display:inline-block;

                     }

    .logo h1 {
            display:inline-block;
            margin:0;
            padding:0;
        color:white;
    }

    ul, li {
            padding:0;
            margin:0;
    }
    #navigation ul {
            list-style: none;
            float:right;
    }
    #navigation ul li {
            display:inline;
    }

    #navigation a {
            font-size:14px;
            padding: 0 15px;
            color:white;
            text-decoration:none;
    }

    #navigation a:hover {
            color:grey;
    }
    #content {
            width:800px;
            margin: 0 auto;
            margin-top:80px;
    }

问题在于，当我放大页面时，我只看到带有“Logo”文本的元素，并且在滚动时我无法水平滚动以查看标题的链接。试试这段代码你会明白我的意思。如何使固定标题水平滚动？

Answer 1

固定元素通常不会滚动，它们不是为它们制作的，因为它们完全脱离整个网站的上下文。我会考虑使用position: absolute代替。

http://jsfiddle.net/FQ4LC/8/

Answer 2

尝试在托管您要进行滚动的所有内容的CSS中设置此属性。 'overflow-X：scroll'，

Answer 3

更改

.center {width: 1000px; margin: 0 auto;}

到

.center {margin: 0 auto;}

编辑：使用此解决方案，标题不会滚动，但链接不会消失。

编辑2：JavaScript（jQuery）解决方案：

$(document).ready(function () {

    $(window).resize(function () {
        $("#navigation .center").css("maxWidth", $(window).width());
    });
});

如何使用CSS水平滚动固定的HTML标题？

3 个答案: