Festen header in CSS für bedingte nach unten scrollen?

Möchte ich ein header-div (wie eine fahne) nur Feste, wenn der Kopf versucht zu gehen aus dem Bildschirm, wie der Benutzer scrollt. Ist es möglich zu tun, ohne JS? Für ein Beispiel in der Facebook-timeline, wenn wir einen Bildlauf nach unten ein banner schwebt, sobald Sie die Seite in die Kopfzeile, geht aus dem Bildschirm. Meine Frage ist, ist es möglich zu tun, nur mit CSS?

Falls es nicht klar genug ist, möchte ich wissen, ob ein Stil "position: fixed" angewendet werden kann, bedingt, wie wenn die 80px der Seite gescrollt wird.

CSS ist nicht an Bedingungen geknüpft ist. Meines Wissens ist dies nur machbar mit JS.
Ich Stimme mit Rick. Verwenden Jquery für Einfachheit.
Sie können dies tun, ohne etwas von js, um die Anwendung der neuen position fixiert-Klasse auf den banner / bar. Ich würde nicht mit jQuery nur zum anwenden dieser Klasse und machen den Messungen.. das wäre übertrieben.
Mit, die sagte: hier ist die jQuery-demo jsfiddle.net/rlemon/VZfXE/3 und wenn jsFiddle jemals aufhört, blöd, ich werde aktualisieren mit Vanille-demo.
Dies ist machbar mit CSS.

InformationsquelleAutor Roy | 2013-01-27

  1. 42

    Ja. Sie können es tun einfach mit CSS. Dies geschieht durch ein normales scrolling header, die über eine Feste, die zeigt sich erst nach den normalen Schriftrollen bis oben. Dies ist eine Art, wie http://techcrunch.com ist, es zu tun.

    Update [10/31/2013] - Techcrunch verändert Ihre Benutzeroberfläche vor kurzem so, Sie können nicht sehen, diese gibt es nicht mehr!

    Schauen Sie sich diese demo: http://jsfiddle.net/WDnyb/2/

    HTML

    <div class="header">Header</div>
<div class="outer">
    <span class="banner">LOGO</span>
    <div class="header">Header</div>
</div>
<div class="content">Content</div>

    Entsprechenden CSS -

    .header {
    width: 100%;
    position: fixed;
    top: 0;
    bottom: auto;
}
.outer {
    position: relative;
    height: 100px;
}
.outer .header {
    position: absolute;
    bottom: 0;
    z-index: 2;
    top: auto;
}
.content {
    height: 1500px;
    margin-top: 100px;
}
    Sie, Herr @techfoobar, sind super! Ich hatte eine Ahnung, dass ich etwas tun könnte in CSS! Vielen Dank, Mann!
    Ein problem bei diesem Ansatz ist, dass die .outer verdecken können nur Teil die .header. Mit großen überschriften oder kleinen Blättern Schritten, Sie kann leicht sehen, dass beide Header.
    Coolen Ansatz :), schade, dass du den header doppelt
    Dies scheint nicht richtig. Der Inhalt jedes header-enden "überlappen" und erhalten Sie einen doppelten Effekt. Nicht sehr sauber.
    Ich bin mit @KevinCantwell, nicht ganz sauber und nahtloser.. Wenn Sie haben könnte, den festen "Header" text vor den anderen, es wäre genial, weil Sie nicht sehen, die andere nach oben rutscht..

    InformationsquelleAutor techfoobar

  2. 2

    Diese kann getan werden, richtig und ohne javascript mit position: sticky.

    Finden https://css-tricks.com/position-sticky-2/ für Beispiele.

    Achtung: Im moment des Schreibens, es ist nicht unterstützt, IE11, opera mini und android-Aktie browser: https://caniuse.com/#feat=css-sticky

    InformationsquelleAutor L0laapk3

  3. 1

    Ist es nicht möglich mit css. Sie können tun, mit JavaScript oder jQuery. Da müssen es einige Bedingungen.

    Von Ihnen positiv bewertet werden, aus dem einfachen Grund, dass die akzeptierte Antwort ist nicht korrekt. Sie benötigen javascript für eine saubere Umsetzung.

    InformationsquelleAutor naresh kumar

  4. 0
    Html----included my content within

   <header1>
       ..............
  </header1> 

 JS

  <script>
  $(document).ready(function() {
   var $header1 = $("header1"),
    $clone = $header1.before($header1.clone().addClass("clone"));

     $(window).on("scroll", function() {
    var fromTop = $("body").scrollTop();
    $('body').toggleClass("down", (fromTop > 200));
 });
 });
</script>

    habe ich oben verwendete script einen header fester,seine Ordnung, die in googlechrome nicht im firefox.....

    InformationsquelleAutor anya

Schreibe einen Kommentar