Erstellen von statischen Symbolleiste auf der Webseite folgt, dass scrollen in HTML

Wie wollen Sie eine toolbar-wie-Objekt in HTML folgt, dass der Nutzer scrollen, so dass es immer an den oberen Rand der sichtbaren Seite?

Vielen Dank im Voraus!

InformationsquelleAutor Mark Szymanski | 2010-05-12
  1. 17

    css

    .selector
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

    html

    <div class="selector">
  ... content for bar here ...
</div>
    • nicht das blockieren von Inhalten darunter?
    InformationsquelleAutor Gabriel
  2. 10

    Tun, die Sie speziell brauchen es, um zu Blättern (animieren) oder eine statische (toolbar wie) Objekt?

    EDIT:

    Ok so fügen Sie eine statische(toolbar wie) das Objekt hat eine Breite, die 100% der Seite, und einer Höhe von sagen 25px, Sie würden dies tun.

    HTML

    <div id="toolbar">
    <p>Some content...</p>
</div>

    CSS

    #toolbar {
    position: fixed;
    width: 100%;
    height: 25px;
    top: 0;
    left: 0;
    padding: 5px 10px; /* some styling, please note overall height of the object will be 35px due to 5px padding on top/bottom. */
    background: #ccc; /* some styling */
    border-bottom: 1px solid #333; /* some styling */
}

    Bitte beachten Sie, dass dieser verdeckt keine Inhalte, die Sie haben an der Spitze der Seite, so verwenden Sie einen oberen Rand, um nach unten drücken, unter der Symbolleiste, oder einfach:

    body {
    margin-top: 35px;
}
    • statische (toolbar wie)
    • Ich wusste nicht, siehe die andere Antwort - sorry für den doppelten post.
    • Das ist ok, deine Antwort hilft mir mit der Marge obwohl, so vielen Dank dafür!
    InformationsquelleAutor Marko
Schreibe einen Kommentar