Wie man eine Feste HTML-header scrollen Sie horizontal mit CSS?

Ich habe den html-code für eine HTML-fixed header:

<!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>

Dies ist der Stil.css-Datei:

        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;
    }

Das problem ist, wenn ich zoom-in-die-Seite sehe ich nur das element mit dem "Logo" mit text, und ich kann nicht horizontal Blättern, um zu sehen, die links von der Kopfzeile auch beim scrollen.
Versuchen Sie einfach diesen code und Sie werden wissen, was ich meine. Wie kann ich die festen header horizontal Blättern?

Kannst du bitte erstellen Sie eine js-bin/fiddle ?
Ich habe diese Geige für den OP: jsfiddle.net/FQ4LC
Danke, Vorschläge, wie kann ich mein Ziel erreichen?

InformationsquelleAutor tonix | 2013-12-06

1

Feste Elemente in der Regel nicht Blättern, Sie sind einfach nicht für Sie gemacht, da Sie völlig aus dem Zusammenhang für die gesamte Website. Ich würde denken über die Verwendung position: absolute statt.

http://jsfiddle.net/FQ4LC/8/
- Hmm... schön. Aber die Kopfzeile wird ausgeblendet, wenn ein horizontaler Bildlauf durchgeführt werden. Dennoch, es ist ein netter Einstieg für eine JavaScript-Lösung.
InformationsquelleAutor Ria Weyprecht
0

Versuchen Sie, diese Eigenschaft in CSS, das hosting alle Inhalte, die Sie wollen, um zu Blättern. 'overflow-X: scroll',
- Ich habe die stellen 'overflow-x:scroll;' in meinem #navigation-id der Art, aber ich bekomme eine andere scrollbar im div, und das ist nicht das, was ich will. Ich will einfach nur, um zu Blättern, die Feste Navigationsleiste horizontal mit dem browser scrollen. Haben Sie eine andere Idee um dies zu erreichen? Danke!!!
InformationsquelleAutor rohit12sh
0

Ändern
```
.center {width: 1000px; margin: 0 auto;}
```
in
```
.center {margin: 0 auto;}
```
Edit: Mit dieser Lösung wird der header nicht scrollen, aber die links nicht verschwinden.

Edit 2: JavaScript (jQuery) Lösung:
```
$(document).ready(function () {

    $(window).resize(function () {
        $("#navigation .center").css("maxWidth", $(window).width());
    });
});
```
- Dies versucht, aber ich möchte zu halten alle in der Mitte, wenn ich verkleinern. Gibt es einen anderen Weg?
- Ich habe einige Fortschritte mit #navigation { position:device-fixed; /* ... */ } aber das ist immer noch nicht auf eine funktionierende Lösung.
- Ja, dies ist nicht auf eine funktionierende Lösung, weil die navbar verliert seine Feste position, wenn Sie scrollen die Seite vertikal... kann ich nicht begreifen, wie kann ich dieses problem lösen, irgendwie wirklich einfaches problem, denke ich...
- Ich kann nicht fix das mit reinem css. Die jQuery-Lösung (siehe edit 2) funktioniert bei mir.
- wo soll ich das JQuery?
InformationsquelleAutor kalamar

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.