Position Sticky vom bottom aus

[fhw]

Hallo zusammen,
ich habe eine Sidebar, welche ich Scrollen lassen möchte.
Hierzu habe ich folgenden CodePen erstellt: https://codepen.io/JohnHSmith/pen/vYJXELz
Nun, mit dem sticky-element auf "top: 0" funktioniert das hervorragend.
Ich möchte jedoch, dass die Sidebar erst sticken bleibt wenn der untere Rand am Rand des Viewports gerät - also genau umgekehrt wie es bei top ist.
Mit bottom funktioniert das leider nicht.
Kann mir hier jemand einen Grund nennen oder sagen wie ich das ohne JS machen kann, da der Scroll-Eventhandler sehr unperformant ist?

Danke!

 

[AndreasB]

Ich verstehe nicht ganz, wie sich deine Sidebar verhalten soll.

Dieser Artikel zeigt sehr schön, wie position: sticky funktioniert:
Das Element, das die Eigenschaft bekommt, bleibt immer in seinem Elterelement und kann, solange sein Elternelement die komplette Höhe des Bildschirms einnimmt nicht über die definierten Grenzen (top, bottom, right, left) hinaus.

In deinem Pen kann man das Verhalten beobachten, wenn man das position: sticky und die Grenzen in den Selektor #sticky > div verschiebt:

#sticky {
  border: 1px solid red;
}
#sticky > div {
  height: 100px;
  position: sticky;
  bottom: 0;
  top:0; /* zum Testen */
}

Ich denke aber, dass dies nicht das Verhalten ist, was du dir wünschst.

 

[fhw]

Ich verstehe nicht ganz, wie sich deine Sidebar verhalten soll.

Dieser Artikel zeigt sehr schön, wie position: sticky funktioniert:
Das Element, das die Eigenschaft bekommt, bleibt immer in seinem Elterelement und kann, solange sein Elternelement die komplette Höhe des Bildschirms einnimmt nicht über die definierten Grenzen (top, bottom, right, left) hinaus.

In deinem Pen kann man das Verhalten beobachten, wenn man das position: sticky und die Grenzen in den Selektor #sticky > div verschiebt:

#sticky {
  border: 1px solid red;
}
#sticky > div {
  height: 100px;
  position: sticky;
  bottom: 0;
  top:0; /* zum Testen */
}

Ich denke aber, dass dies nicht das Verhalten ist, was du dir wünschst.

Danke erstmal für deine Antwort.
Vielleicht erkläre ich die Funktion einmal.
Die Sidebar soll Werbung beinhalten. Da nun allerdings, wenn die Sidebar `top: 0` hat, nur die ersten paar Werbeblöcke sichtbar sind (zumindest bis man ganz runter scrollt) soll es genau andersrum laufen. Die Sidebar soll erst relativ sein und dann, wenn das untere Ende des Bildschirms das untere Ende des letzten Werbeblocks trifft, soll die Sidebar fixed sein.

 

[AndreasB]

Ich glaube jetzt versteh ich, wie das funktionieren soll. Das Aside soll so lange mitscrollen, bis es keinen weiteren Inhalt mehr gibt und dann stehenbleiben.

Das würde ich ebenfalls über ein top machen, den Wert aber so wählen, dass das Aside erst anhält, wenn seine komplette Höhe minus der Fensterhöhe nach oben rausgeschoben wurde.

Ich habe mal eine Fiddle gebaut um zu zeigen was ich meine.
Dort Initialisiere ich als erstes über JS eine CSS Variable, die die Elementhöhe beinhaltet.
Das muss man dann eventuell bei einem window.onresize nochmal machen.

Meintest du sowas?

 

[fhw]

Ich glaube jetzt versteh ich, wie das funktionieren soll. Das Aside soll so lange mitscrollen, bis es keinen weiteren Inhalt mehr gibt und dann stehenbleiben.

Das würde ich ebenfalls über ein top machen, den Wert aber so wählen, dass das Aside erst anhält, wenn seine komplette Höhe minus der Fensterhöhe nach oben rausgeschoben wurde.

Ich habe mal eine Fiddle gebaut um zu zeigen was ich meine.
Dort Initialisiere ich als erstes über JS eine CSS Variable, die die Elementhöhe beinhaltet.
Das muss man dann eventuell bei einem window.onresize nochmal machen.

Meintest du sowas?

Genau!
Vielen lieben Dank!
Rein mit CSS geht das also nicht?

 

[AndreasB]

So wie ich das sehe nicht.

Man bräuchte zur Berechnung in dem Element die eigene Höhe und diese kann man meines Wissens nicht abrufen.

Vielleicht weiß ja ein CSS Ninja da einen Trick.

 

[Werner123]

Naja dann machst du am "Bottom" einen Link nach oben ...
Du weist aber nicht wann (ab welcher Position) der Benutzer wieder nach oben möchte!

Bei mir hat folgendes JavaScript funktioniert::

 const mybutton = document.getElementById("seitenanfang");
 const mainCont = document.getElementsByTagName("body")[0];
 mainCont.onscroll = function () {

  // Hier den Wert anpassen wann das Symbol erscheinen soll
  if (mainCont.scrollTop >= 1420 || document.documentElement.scrollTop >= 1420) {
   mybutton.classList.add("seitenanfang");
   mybutton.addEventListener("click", function () {
    document.getElementsByTagName("body")[0].scrollIntoView({behavior: 'smooth', block: 'start'});
   });
 }
 else {
    mybutton.classList.remove("seitenanfang");
   }
  }
});

.seitenanfang {
 position: Fixed;
 right: 15px;
 top: 600px;
 border-style: Solid;
 border-width: 0 15px 25px 15px;
 z-index: 1000;
 user-select: None;
 border-color: Transparent Transparent rgba(183, 183, 183,0.300) Transparent;
 transition: border-width 1s;
}

<div id="seitenanfang" title="Zum Seitenanfang"></div>