So beheben Sie ein Div nur mit CSS am Seitenanfang

71

Ich schreibe eine Glossarseite. Ich habe die Alphabet-Links oben auf der Seite. Ich möchte den oberen Rand der Seite (einschließlich der Alphabet-Links) festhalten, während der Abschnitt der Seite mit den Definitionen beim Klicken auf ein Alphabet nach oben / unten scrollt.

Mein HTML sieht ein bisschen so aus:

<html>
<head><title>My Glossary</title></head>
<body>
        <div id="top">
            <a href="#A">A</a> |
             <a href="#B">B</a> |
            <a href="#Z">Z</a>
        </div>

        <div id="term-defs">
           <dl>
               <span id="A"></span>
               <dt>foo</dt>
               <dd>This is the sound made by a fool</dd>
               <!-- and so on ... -->
           </dl>
        </div>
</body>
</html>

[Bearbeiten]

Die Art von Effekt, den ich zu erzielen versuche, ähnelt dem hier . Der Unterschied besteht darin, dass im Beispiel im Link das Scrollen der Seite erfolgt, wenn ein Benutzer auf eine Kategorie klickt. In meinem Fall möchte ich die Seite scrollen, wenn auf einen Index (dh ein Alphabet) oben auf der Seite geklickt wird.

html css oompahloompah
quelle

Antworten:

88

Ja, es gibt verschiedene Möglichkeiten, dies zu tun. Der "schnellste" Weg wäre, dem div CSS hinzuzufügen, ähnlich wie im Folgenden

#term-defs {
height: 300px;
overflow: scroll; }

Dadurch wird das div zum Scrollen gezwungen, dies erzielt jedoch möglicherweise nicht den besten Effekt. Eine andere Möglichkeit wäre, die Position der Gegenstände oben absolut festzulegen. Sie können damit spielen, indem Sie so etwas tun.

#top {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  height: 23px;
}

Dadurch wird es oben auf anderen Inhalten mit einer Höhe von 23 Pixel fixiert.

Die endgültige Implementierung hängt davon ab, welchen Effekt Sie wirklich wünschen.

Mitchel Sellers
quelle
9
Nur zu klären, falls das OP es nicht weiß, z-indexist die Magie hier. Es hebt das Div "über" die anderen Elemente auf der Seite und lässt sie darunter scrollen und "vorbei".
Drew
@mitchel: danke für deine hilfe. Ich habe es versucht, aber der Effekt war nicht ganz das, wonach ich gesucht habe. Ich habe meine Frage bearbeitet, um vielleicht klarer zu erklären, welche Art von Effekt ich erzielen
möchte
@oompahloompah: Der beste Weg, um das gewünschte Verhalten zu erreichen, besteht darin, die Antwort von 'Mitchel Sellers' zu verwenden und die obere Leiste wie folgt zu implementieren <link rel="import" href="https://stackoverflow.com/path/to/topbar.html">. Ein anderer Ansatz wäre, an jeder Site ein 'Platzhalter'-Div hinzuzufügen, das das gleiche' height'-Attribut wie das # top-Element haben sollte. Beide Varianten müssen leicht an Ihren HTML-Code angepasst werden, daher wissen Sie nichts über eine reine CSS-Lösung.
Johannes Griebenow
18

Sie können so etwas tun:

<html>
<head><title>My Glossary</title></head>
<body style="margin:0px;">
        <div id="top" style="position:fixed;background:white;width:100%;">
            <a href="#A">A</a> |
             <a href="#B">B</a> |
            <a href="#Z">Z</a>
        </div>

        <div id="term-defs" style="padding-top:1em;">
           <dl>
               <span id="A"></span>
               <dt>foo</dt>
               <dd>This is the sound made by a fool</dd>
               <!-- and so on ... ->
           </dl>
        </div>
</body>
</html>

Es ist die Position: behoben , die am wichtigsten ist, da der obere Teil aus dem normalen Seitenfluss genommen und an der festgelegten Position fixiert wird. Es ist auch wichtig, das padding-top: 1em zu verwenden, da sonst der Begriff defs div direkt unter dem top div beginnen würde. Der Hintergrund und die Breite dienen dazu, den Inhalt des Begriffs-defs div abzudecken, während sie unter dem oberen div scrollen.

Hoffe das hilft.

fsaftoiu
quelle
Wie entscheiden Sie, ob das Polster 1em oder mehr sein soll?
TechMaze
Es ist tatsächlich die Höhe der Gegenstände, die oben fixiert werden sollen. In diesem Fall war es 1em, weil das feste <div> eine Textzeile ist.
fsaftoiu
6

Sie können einfach das obere Div fixieren:

#top { position: fixed; top: 20px; left: 20px; }
Sascha Goebel
quelle
3

Sie können auch Flexbox verwenden , müssen jedoch ein übergeordnetes Div hinzufügen, das div#topund abdeckt div#term-defs. Das HTML sieht also so aus:

    #content {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    #term-defs {
        flex-grow: 1;
        overflow: auto;
    } 
    <body>
        <div id="content">
            <div id="top">
                <a href="#A">A</a> |
                <a href="#B">B</a> |
                <a href="#Z">Z</a>
            </div>
    
            <div id="term-defs">
                <dl>
                    <span id="A"></span>
                    <dt>foo</dt>
                    <dd>This is the sound made by a fool</dd>
                    <!-- and so on ... -->
                </dl>
            </div>
        </div>
    </body>
Erweitern Sie das Snippet

flex-grow stellt sicher, dass die Größe des Divs der verbleibenden Größe entspricht.

Sie könnten dasselbe ohne Flexbox tun, aber es wäre komplizierter, die Höhe von zu berechnen (Sie müssten die Höhe von #term-defskennen #topund calc(100% - 999px)die Höhe von #term-defsdirekt verwenden oder einstellen ).
Mit der Flexbox sind dynamische Größen der Divs möglich.

Ein Unterschied besteht darin, dass die Bildlaufleiste nur auf der angezeigt wird term-defs div.

Domysee
quelle