Sidebar bei OnePage Website einblenden lassen

PeterLustig9 · 8. Februar 2021

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

PeterLustig9 · 8. Februar 2021

Mir würde es auch reichen ein zweites Fenster auf einem Teil der Seite zu haben.

MrMurphy · 8. Februar 2021

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?

AndreasB · 8. Februar 2021

Der erste Teil deine Problems klingt nach position: sticky.

Was du mit:

Zitat von PeterLustig9

[...] außer wenn man wieder auf die Startseite gelangt.

meinst, erschließt sich mir gerade nicht.

MrMurphy · 8. Februar 2021

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.

Elly · 8. Februar 2021

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");
        }

PeterLustig9 · 8. Februar 2021

Ich habe jetzt schon eine andere Lösung finden. Ich werde eure Ansätze dennoch mal ausprobieren. Ich danke euch!

PeterLustig9 · 8. Februar 2021

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

.dropbtn {
  background-color: #000088;
  color: white;
  padding: 16px;
  font-size: 20px;
  border: 2px;
  border-color: black;
  width: 250px;
  z-index: 0;
}


.dropdown {
  position: relative;
  display: inline-block;
  float: right;
  margin-right: 10%;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #F0F0F0;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;

}

.dropdown-content h6 h5{
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content h6:hover {background-color: #FFFFFF;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {opacity: 0.85;}

Alles anzeigen

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>

Elly · 9. Februar 2021

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.

PeterLustig9 · 10. Februar 2021

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

PeterLustig9 · 10. Februar 2021

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

Elly · 10. Februar 2021

Zitat von PeterLustig9

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.

PeterLustig9 · 10. Februar 2021

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

PeterLustig9 · 10. Februar 2021

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.

Code

html, body{margin: 0;padding: 0;height: 100%;text-align: center;}
section {min-height: 100%;}
a{text-decoration: none;}
li{list-style-type: none;}

h1, h2, h3, h4, a {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 700;
  color: #494949;
  font-size: 20px;
  text-transform: uppercase;
}

h2 {
  color: #00008B
}

h3 {
  font-size: 40px;
  padding-top: 8%;
  margin-bottom: 5px;
}

h4, p, li, ul {
  font-family: 'Source Sans Pro', sans-serif;
  z-index: 1;
}

hr {
  width: 30px;
  height: 3px;
  background: #494949;
  border: 0px;
  margin: 0 auto 40px auto;
}
li, img, #logo{transition: all 300ms; -webkit-transition: all 300ms; -moz-transition: all 300ms;}


/*header******************/

header {
  width: 100%;
  height: 65px;
  position: fixed;
  top: 0;
  left: 0;
  background: white;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

#logo {
  width: 100px;
  float: left;
  margin: 10px 0 0 50px;
}

#logo img{
  width: 90%;
}

#logo:hover {
  transform: rotateY(360deg);
}

header nav {
  float: right;
  margin: 10px 50px 0 0;
}

header nav ul li {
  float: left;
  margin-right: 25px;
}

header nav ul li a {
  font-size: 16px;
}

header nav ul li:hover {
  padding-top: 3px;
}

/*home******************/

#Home {
  background: url(br.png);
  background-position: center center;
  background-size: cover;
  background-attachment: fixed;
}

#Home h1 {
  margin: 300px auto 0 auto;
  font-size: 80px;
  text-shadow: 1px 1px 2px grey;
}

#Home h2 {
  margin: 0 auto 0 auto;
  font-size: 35px;
  text-shadow: 0.5px 0.5px 1px black;
}

#Home img {
  width: 42px;
  margin-top: 400px;
  opacity: 0.5;
}

#Home img:hover {
  opacity: 0.8;
  transform: scale(1.1);
}

/*Über uns******************/

#Überuns p {
  width: 900px;
  margin: 0 auto 0 auto;
  font-size: 21px;
}
#Martin {
  height: 294px;
  width: 257px;
  border: 1px solid #000000;
  margin-top: 40px;
}
#Martin:hover {
  transform: scale(1.1);
}
/*Leistungsprofil******************/

#Leistungsprofil ol li {
  font-size: 22px;
  font-weight: 500px;
}

#Leistungsprofil {
  background-color: #F0F0F0;
}

#Leistungsprofil li{
  padding-top: 25px;
}

#Leistungsprofil li:hover{
  transform: scale(1.1);
}

/*News******************/

h4 {
  font-size: 23px;
}

#News p {
  margin: 0 auto 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 21px;
  width: 800px;
}

/*Kontakt******************/

form input, textarea {
  font-family: 'Source Sans Pro', sans-serif;
  font-size: 15px;
  margin-bottom: 10px;
  border-radius: 2px;
  border: 2px solid;
  border-color: #494949;
  outline: none;
  font-size: 20px;
}

form input:first-child {
  margin-top: 40px;
}

form input {
  width: 650px;
  height: 40px;
}

form textarea {
  width: 650px;
  height: 220px;
  resize: none;
}

.input_text {
  color: #494949;
  padding-left: 10px;
}

#Kontakt p  {
  width: 650px;
  margin: 0 auto 0 auto;
  font-size: 21px;
}

.button {
  background-color: #f0f0f0;
  color: #494949;
  width: 660px;
  height: 40px;
}

.button:hover {
  background-color: #E3E3E3;
}

.dropbtn {
  background-color: #000088;
  color: white;
  padding: 16px;
  font-size: 20px;
  border: 2px;
  border-color: black;
  width: 250px;

}



.dropdown {
    position: sticky;
    bottom:665px;
    display: inline-block;
    float: right;
    margin-right: 10%;
    z-index: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #F0F0F0;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 0;

}

.dropdown-content h6 h5{
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.dropdown-content h6:hover {background-color: #FFFFFF;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {opacity: 0.85;}

h5{
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 600;
  font-size: 18px;
  margin: 8px 0 8px 0;
}

h6{
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 500;
  font-size: 16px;
  margin: 5px 0 0 0;
}

#Kontakt {
  background-color: #F0F0F0;
}
/*Footer******************/

footer {
  width: 100%;
  height: 40px;
  background-color: #3f3f3f;
}

footer a {
  font-size: 13px;
  color: white;
  text-transform: none;
  float: right;
  width: 120px;
  padding-top: 10px;
  font-weight: 300;
}

footer a:hover {
  text-decoration: underline;
}

footer p {
  font-size: 13px;
  color: white;
  text-transform: none;
  float: left;
  width: 300px;
  padding-top: 1px;
}

Alles anzeigen

Sidebar bei OnePage Website einblenden lassen

Jetzt mitmachen!

Teilen

Tags