Ausrichtung eines Element während y

Question

scrollen Was ich will, ist, wenn jemand y auch der Header in diesem Fall blättern Sie bitte überprüfen the screen shot

Etwas Position mit (den Tagen und Daten enthält, sollten sichtbar sein.): Feste und Z-Index etc.

(Beispiel ich gesehen habe: - Wenn Sie Stapel öffnen-Überlauf und JavaScript ist deaktiviert, dann wird in diesem Fall eine rote Nachricht angezeigt und weiterhin angezeigt, auch wenn Sie die Seite nach unten scrollen.)

Also was ich tun möchte, ist: -

Anfangs beim Laden der Seite wird diese Zeile zwischen der Seite sein (da es viele andere Dinge oben gibt und wenn der Benutzer nach unten scrollt, sollte es für den Benutzer sichtbar sein, dh dies bleibt oben auf der Seite)

Answer 1

If Ich verstehe dich richtig, du suchst ein Element, das nicht oben auf der Seite steht, sondern oben bleibt, wenn du nach unten scrollst? Dies kann mit CSS und ein wenig JavaScript gezaubert werden (jQuery der Kürze halber verwendet):

/* CSS - you should add width, height, padding as needed */ 
#your_element { position:relative;} 

Ihr Element verhält sich normalerweise, wenn JS deaktiviert. Ansonsten macht das folgende Snippet es dynamisch:

win = $(window); 
element = $('#your_element'); 

if (element.length) {    // <-- Make sure element exists 
    win.scroll(function() {   // <-- When scrolling do the following 
     if (win.scrollTop() > 100) { // <-- Adjust number. Explanation to follow 
      element.css({'position':'fixed', 'top':'0px'}); 
     } else { 
      element.css({'position':'relative', 'top':'auto'}); 
     } 
    }); 
} 

Jetzt müssen Sie nur noch den Wert einstellen 100 den Abstand zwischen dem oberen Rand der Seite und oben in Ihrem Element zu entsprechen. Also, wenn Ihr Element 250px von oben ist, würden Sie 250 verwenden. Wenn Sie nicht sicher sind, können Sie damit herumspielen, bis Sie etwas bekommen, das glatt aussieht.