Sidebar bei OnePage Website einblenden lassen

  • Hallo,

    ich habe erst vor ein paar Tagen mit Html und Css angefangen und bastel gerade an einer Webseite. Ich möchte auf meiner OnePage Webseite eine fixed sidebar einbauen, die ab einem bestimmten punkt beim scrollen erscheint, danach aber immer an der rechten seite bleiben soll, außer wenn man wieder auf die Startseite gelangt.

    Mein Problem ist, dass ich die Sidebar zwar schon erstellt, diese sich jedoch am Boden der Seite befindet und ich absolut keine Ahnung habe wie ich mein Vorhaben umsetzen kann.

    Den HTML und CSS Code könnte ich ggfs. dann auch teilen, wenn mir jemand zu helfen vermag.

    mfG ein verzweifelter Neuling

  • Ohne JavaScript wird da kaum etwas gehen.


    Konkrete Hilfe ist nur mit Kenntnis deiner aktuellen Seite möglich.


    Hast du dir schon überlegt wie das auf Smartphones beziehungsweise bei schmalen Fenstern funktionieren soll?

  • Ich verstehe das so, dass die Sidebar nicht angezeigt werden soll, wenn der oberste Teil der einseitigen Webseite angezeigt wird. Erst wenn auf der Seite weiter runtergescrollt wird soll die Sidebar erscheinen.


    Offensichtlich schwebt PeterLustig9 vor, dass jeweils eine Fensterhöhe (zumindest ungefähr) eine Seite der einseitigen Webseite ist. Mir fällt dazu auch kein besserer Begriff ein.

  • Vl kann ich zur Abwechslung auch mal was beitragen.

    Ich hab in meiner Navigation eine Klasse .sticky drinnen, die hinzugefügt wird, sobald man 20px nach unten scrollt. Das könnte man ja so verwenden, dass dieses Fensterlein erstmal hidden ist und durch die .sticky-Klasse auf visible gestellt wird.


    Code
    window.onscroll = ()=>{
              this.scrollY > 20 ? navigation.classList.add("sticky") : navigation.classList.remove("sticky");
            }
  • Elly ich kann deinen Code noch nicht so richtig nachvollziehen. Ich habe das ganze jetzt erstmal so gelöst, dass ich einfach ein dropdown unten bei der kontaktseite habe (siehe Code). Wie würdest du das ganze dann hier integrieren?

    Code
    <div class="dropdown">
            <button class="dropbtn">Kontaktdaten</button>
            <div class="dropdown-content">
              <h5>Sie erreichen uns unter</h5>
              <h6></h6>
              <h6></h6>
              <h6></h6>
              <h5>Nutzen Sie auch gerne das Kontaktformular</h5>
            </div>
          </div>
  • Schau mal hier. So hättest du das Kontaktfeld immer unten stehen. Da musst du nur position:sticky; und bottom:0; ändern.

    Ich hab zum Test einfach mal den Inhalt 1500px ausgedehnt.


    Dass das zuerst gar nicht erscheint, krieg ich so mit dem JS-Codeschnipsel nicht hin. Liegt wohl daran, dass man bei scrollY ja oben bereits beginnt und das erst ab dem Button zählt. *grübel*


    Hab noch ein bissl rumprobiert, aber ich krieg's auch nicht hin, dass das erst später eingeblendet wird. Sorry. Andere hier haben aber mehr Ahnung als ich, es gibt also noch Hoffnung. :)

  • Ich hatte gerade Idee das Problem mit dem z-index zu lösen, dh der Button ist die ganze Zeit da, aber wird einfach auf der Startseite halt von dem Bild usw. überdeckt da höherer z-index. Nun bastel ich die ganze Zeit daran aber kriege es nicht hin :(

  • Wo muss ich die Box in der HTML-Datei einfügen?

    Ich hab meine Testseite ja verlinkt. Da klickst du rechte Maustaste - Quelltext anzeigen. Dann siehst du alles schön.


    Das mit dem z-index ist eine coole Sache. Nur brauchst du dann ein Bild, dass danach wieder verschwindet. Also quasi dasselbe Problem.


    Ich glaub, dass das Schnipsel von mir ein Anfang ist, vl kann da jmd anderes weiterhelfen. Ich kenne mich mit JS leider noch nicht gut aus.

  • Das Bild ist ja weg sobald man runterscrollt. Deshalb die Idee mit dem z-index. Funktioniert aber leider nicht. Lustigerweise habe ich genau das, was du mir geschickt hattest, in den Code getippt - ohne Ergebnis. Aber wenn ich es copy-paste funktioniert es? Komisch

  • Kriegt das Problem irgendjemand gefixt? Hänge den gesamten Quellcode an. Ziel ist es, dass die kleine blaue Box erst ab "Über uns" angezeigt wird, d.h. auf der Home Seite versteckt ist.


Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!