Elemente sollen nur bis zu einem bestimmten Punkt gescrollt werden


#1
Hallo zusammen,

ich suche nach einer Möglichkeit, dass Teile meiner html Seite (Navigation und Unterüberschrift) nur bis zum oberen Bildschirmrand mitgescrollt werden und dann stehen bleiben. So wie es bei dieser Seite (tutorials.de) mit dem oberen Navigationsbalken passiert. Kann mir da jemand helfen?

Liebe Grüße
Meggi
 

Sprint

Erfahrenes Mitglied
#2
Die CSS Eigenschaft sticky ist das, was du brauchst. Über top kannst du noch bestimmen, wie weit das Element noch verschwindet.
CSS:
.element{
    position: sticky;
    top: -xx px;
}
 
#3
Vielen Dank, das war genau das, was ich brauchte. Funktioniert soweit ganz gut, nur am letzten ende der Seite verschwindet der teil beim scrollen doch wieder mit nach oben, weiß jemand woran das liegen könnte?
 

Sprint

Erfahrenes Mitglied
#6
Nicht wirklich. Es fehlen ja dann die ganzen externen Dateien. Zeig hier doch mal die betreffende Stelle in der CSS Datei und in der HTML. Vielleicht kann man ja da was erkennen.
 
#7
HTML:
<!DOCTYPE html>
<head>
    <title>Charaktere</title>
    <link href="potter.css" rel="stylesheet" type="text/css" media="screen">
</head>
<body>
<h1>Das HARRY POTTER Universum</h1>   
    <nav>
        <ul>
            <li> <a href="http://10.1.1.17/~19181/Potter Universum Projekt/hogwarts.html">Hogwarts</a> </li>
            <li> <a href="charaktere.html">Charaktere</a> </li>
            <li> <a href="http://10.1.1.17/~19181/Potter Universum Projekt/zauberstäbe.html">Zauberstäbe</a> </li>
            <li> <a href="quidditch.html">Quidditch</a> </li>
            <li> <a href="rowling.html">Joanne K. Rowling</a></li>
            <li> <a href="index.html">The Wizarding World</a><li>
        </ul>
    </nav>
<div class="test">
    <h4>Die Charaktere</h4>
    <nav2>
        <ul>
            <li><a href="#hogwartsschüler">Die Hogwarts Schüler </a></li>
            <li><a href="#hogwartslehrer">Die Hogwarts Lehrer </a></li>
            <li><a href="#ordendesphönix">Der Orden des Phönix</a></li>
            <li><a href="#ministerium">Die Ministeriums Mitarbeiter</a></li>
            <li><a href="#todesser">Voldemort und die Todesser</a></li>
        </ul>
    </nav2>
</div>
<div class="haupttext">
    <!-<h2 id="hogwartsschüler">Die Hogwarts Schüler </h2>
    <div class="eb">
    Hier werden die wichtigsten Schüler von <a href="http://10.1.1.17/~19181/Potter Universum Projekt/hogwarts.html">Hogwarts </a>, der Schule für Zauberei und Hexerei, zu Harry Potters Schulzeit vorgestellt.
    </div>
    <div class="charakterbox1">
        <h3>Harry Potter</h3>
        <img src="Harry Potter.jpg" alt="Bild" hight="524" width="400">
        <p>Geburtsdatum: 31.7.1980 </p>
        <p>Haus: Gryffindor </p>
        <p>Begleitendes Tier: Hedwig (Eule) </p>
        <p>Patronus: Hirsch </p>
        <p>Schauspieler: Daniel Redcliffe </p>
    </div>
    <div class="charakterbox1">
        <h3>Ron Weasley</h3>
        <img src="Ron Weasley.jpg" alt="Bild" hight="524" width="400">
        <p>Geburtsdatum: 1.3.1980</p>
        <p>Haus: Gryffindor </p>
        <p>Begleitendes Tier: Krätze (Ratte), Pigwidgeon (Eule)</p>
        <p>Patronus: Jack Russell Terrier</p>
        <p>Schauspieler: Rupert Grint</p>
    </div>
    <div class="charakterbox1">
        <h3>Hermine Granger</h3>
        <img src="Hermine Granger.jpg" alt="Bild" hight="524" width="400">
        <p>Geburtsdatum: 19.9.1979</p>
        <p>Haus: Gryffindor </p>
        <p>Begleitendes Tier: Krummbein (Kater)</p>
        <p>Patronus: Otter</p>
        <p>Schauspieler: Emma Watson</p>
    </div>
    <div class="charakterbox1">
    <h3>Draco Malfoy</h3>
        <img src="Draco Malfoy.jpg" alt="Bild" hight="524" width="400">
        <p>Geburtsdatum: 5.6.1980</p>
        <p>Haus: Slytherin</p>
        <p>Begleitendes Tier:-</p>
        <p>Patronus: -</p>
        <p>Schauspieler: Tom Felton</p>   
    </div>
    <div class="charakterbox1">
        <h3>Neville Longbottom</h3>
        <img src="Neville Longbottom.jpg" alt="Bild" hight="524" width="400">
        <p>Geburtsdatum: 30.7.1980</p>
        <p>Haus: Gryffindor </p>
        <p>Begleitendes Tier: Trevor (Kröte)</p>
        <p>Patronus: - </p>
        <p>Schauspieler: Matthew Lewis</p>   
    </div>
    <div class="charakterbox1">
        <h3>Ginny Weasley</h3>
        <img src="Ginny Weasley.jpg" alt="Bild" hight="524" width="400">
        <p>Geburtsdatum: 11.8.1981</p>
        <p>Haus: Gryffindor </p>
        <p>Begleitendes Tier: -</p>
        <p>Patronus: Pferd</p>
        <p>Schauspieler: Bonnie Wright</p>   
    </div>
    <div class="charakterbox1">
        <h3>Fred und George Weasley</h3>
        <img src="Fred und George Weasley.jpg" alt="Bild" hight="524" width="400">
        <p>Geburtsdatum: 1.4.1978</p>
        <p>Haus: Gryffindor </p>
        <p>Begleitendes Tier:-</p>
        <p>Patronus: Kojote und Hyäne</p>
        <p>Schauspieler: James und Oliver Phelps</p>       
    </div>
    <div class="charakterbox1">
        <h3>Luna Lovegood</h3>
        <img src="Luna Lovegood.jpg" alt="Bild" hight="524" width="400">
        <p>Geburtsdatum: 13.2.1981</p>
        <p>Haus: Gryffindor </p>
        <p>Begleitendes Tier:-</p>
        <p>Patronus: Hase</p>
        <p>Schauspieler: Evanna Lynch</p>   
    </div>
<h2 style="clear:both" id="hogwartslehrer">Die Hogwarts Lehrer</h2>
    <div class="eb">
    Hier werden die wichtigsten Lehrer von <a href="http://10.1.1.17/~19181/Potter Universum Projekt/hogwarts.html">Hogwarts</a>, der Schule für Zauberei und Hexerei, zu Harry Potters Schulzeit vorgestellt.
    </div>
    <div class="charakterbox2">
        <h3>Albus Dumbledore</h3>
        <img src="Albus Dumbledore.jpg" alt="Bild" hight="524" width="400">
        <p>Unterrichtsfach: Schulleiter</p>
        <p>Haus: Gryffindor</p>
        <p>Schauspieler: Richard Harris, Klaus Höhne</p>   
    </div>
    <div class="charakterbox2">
        <h3>Minerva McGonagall</h3>
        <img src="Minerva McGonagall.jpg" alt="Bild" hight="524" width="400">
        <p>Unterrichtsfach: Verwandlung </p>
        <p>Haus: Hauslehrerin von Gryffindor</p>
        <p>Schauspieler: Maggie Smith </p>   
    </div>   
    <div class="charakterbox2">
        <h3>Severus Snape</h3>
        <img src="Severus Snape.jpg" alt="Bild" hight="524" width="400">
        <p>Unterrichtsfach: Zaubertränke, Verteidigung gegen die Dunklen Künste, Schulleiter </p>
        <p>Haus: Hauslehrer von Slytherin</p>
        <p>Schauspieler: Alan Rickman</p>   
    </div>   
        <div class="charakterbox2">
        <h3>Rubeus Hagrid</h3>
        <img src="Rubeus Hagrid.jpg" alt="Bild" hight="524" width="400">
        <p>Unterrichtsfach: Wildhüter, Pflege magischer Geschöpfe </p>
        <p>Haus: Gryffindor</p>
        <p>Schauspieler: Robbie Coltrane</p>   
    </div>   
<h2 style="clear:both" id="ordendesphönix">Der Orden des Phönix</h2>
<div class="eb">
    Der Orden des Phönix ist eine von Albus Dumbledore ins Leben gerufene Wiederstandsgruppe gegen Lord Voldemort. Im folgenden werden die Wichtigesten Charaktere der ersten, sowie der zweiten Wiederstandsgruppe aufgeführt.
    </div>   
    <div class="charakterbox1">
        <h3>Sirius Black</h3>
        <img src="Sirius Black.jpg" alt="Bild" hight="524" width="400">
        <p>Familie und Freunde: Pate von Harry und bester Fruend von James Potter</p>
        <p>Beruf: Gefangener in Askaban</p>
        <p>Schauspieler: Gary Oldman</p>
    </div>
    <div class="charakterbox1">
        <h3>Arthur Weasley</h3>
        <img src="Arthur Weasley.jpg" alt="Bild" hight="524" width="400">
        <p>Familie und Freunde: Vater der Weasley Familie</p>
        <p>Beruf: Leiter des Büros gegen den Missbrauch von Muggelartefakten im Ministerium</p>
        <p>Schauspieler: Mark Williams</p>
    </div>
    <div class="charakterbox1">
        <h3>Molly Weasley</h3>
        <img src="Molly Weasley.jpg" alt="Bild" hight="524" width="400">
        <p>Familie und Freunde: Mutter der Weasley Familie</p>
        <p>Beruf: Hausfrau</p>
        <p>Schauspieler: Julie Walters</p>
    </div>
    <div class="charakterbox1">
        <h3>Remus Lupin</h3>
        <img src="Remus Lupin.jpg" alt="Bild" hight="524" width="400">
        <p>Familie und Freunde: Später Mann von Tonks und Vater von Ted, bester Freund von Sirius und James</p>
        <p>Beruf: Lehrer für Verteidigung gegen die dunklen Künste</p>
        <p>Schauspieler: David Thewlis</p>
    </div>
    <div class="charakterbox1">
        <h3>Nymphandora Tonks</h3>
        <img src="Tonks.jpg" alt="Bild" hight="524" width="400">
        <p>Familie und Freunde: Später Frau von Lupin und Mutter von Ted</p>
        <p>Beruf: Auror</p>
        <p>Schauspieler: Natalia Tena</p>
    </div>
    <div class="charakterbox1">
        <h3>Alastor "Mad-Eye" Moody</h3>
        <img src="Mad-Eye.jpg" alt="Bild" hight="524" width="400">
        <p>Familie und Freunde: - </p>
        <p>Beruf: Auror</p>
        <p>Schauspieler: Brendan Gleeson</p>
    </div>
    <div class="charakterbox1">
        <h3>Kingsley Shacklebolt</h3>
        <img src="Kingsley.jpg" alt="Bild" hight="524" width="400">
        <p>Familie und Freunde: -</p>
        <p>Beruf: Auror</p>
        <p>Schauspieler: George Harris</p>
    </div>
    <div class="charakterbox1">
        <h3>James Potter</h3>
        <img src="James Potter.jpg" alt="Bild" hight="524" width="400">
        <p>Familie und Freunde: Vater von Harry, Mann von Lily, bester Freund von Sirius und Lupin</p>
        <p>Beruf: Wiederstandskämpfer</p>
        <p>Schauspieler: Adrian Rawlins</p>
    </div>
    <div class="charakterbox1">
        <h3>Lily Potter</h3>
        <img src="Lily Potter.jpg" alt="Bild" hight="524" width="400">
        <p>Familie und Freunde: Mutter von Harry, Frau von James</p>
        <p>Beruf: Wiederstandskämpferin</p>
        <p>Schauspieler: Geraldine Somerville</p>
    </div>
    <div class="charakterbox1">
        <h3>Alice Longbottom</h3>
        <img src="Alice Longbottom.jpg" alt="Bild" hight="524" width="400">
        <p>Familie und Freunde: Mutter von Neville, Frau von Frank</p>
        <p>Beruf: Auror</p>
        <p>Schauspieler: -</p>
    </div>
    <div class="charakterbox1">
        <h3>Frank Longbottom</h3>
        <img src="Frank Longbottom.jpg" alt="Bild" hight="524" width="400">
        <p>Familie und Freunde: Vater von Neville, Mann von Alice</p>
        <p>Beruf: Auror</p>
        <p>Schauspieler: -</p>
    </div>
<h2 style="clear:both" id="ministerium">Die Ministeriums Mitarbeiter</h2>
    <div class="charakterbox2">
        <h3>Cornelius Fudge</h3>
        <img src="Fudge.jpg" alt="Bild" hight="524" width="400">
        <p>Beruf: Zaubereiminister</p>
        <p>Schauspieler: Robert Hardy</p>
    </div>
    <div class="charakterbox2">
        <h3>Dolores Umbridge</h3>
        <img src="Umbridge.jpg" alt="Bild" hight="524" width="400">
        <p>Beruf: Mitarbeiterin im Zaubereiministerium und Professorin für Verteidigung gegen die dunklen Künste</p>
        <p>Schauspieler: Imelda Staunton</p>
    </div>
<h2 style="clear:both" id="todesser">Voldemort und die Todesser</h2>
    <div class="charakterbox1">
        <h3>Tom Riddel - Lord Voldemort</h3>
        <img src="Voldemort.jpg" alt="Bild" hight="524" width="400">
        <p>Familie und Freunde: -</p>
        <p>Schauspieler: Ralph Fiennes</p>
    </div>
    <div class="charakterbox1">
        <h3>Lucius Malfoy</h3>
        <img src="Malfoy.jpg" alt="Bild" hight="524" width="400">
        <p>Familie und Freunde: Vater von Draco und Mann von Narzissa</p>
        <p>Schauspieler: Jason Isaacs</p>
    </div>
    <div class="charakterbox1">
        <h3>Bellatrix Lestrange</h3>
        <img src="Bellatrix Lestrange.jpg" alt="Bild" hight="524" width="400">
        <p>Familie und Freunde: Schwester von Narzissa und Cousine von Sirius</p>
        <p>Schauspieler: Helena Bonham Carter </p>
    </div>
    <div class="charakterbox1">
        <h3>Peter Pettigrew</h3>
        <img src="Pettigrew.jpg" alt="Bild" hight="524" width="400">
        <p>Familie und Freunde: Ehemals bester Freund von Sirius, James und Lupin</p>
        <p>Schauspieler: Timothy Spall</p>
    </div>
    
</div>
</body>
</html>
CSS:
body            {background-color: #04043A;
                color:white;
                font-family: sans-serif;
                }
            
            
h1                {font-family: Minion Pro Cond;
                font-size:80px;
                color: #D4AF37;
                padding-bottom:0px;
                padding-left: 65px;
                }
            
h2                {font-family: Minion Pro Cond;
                font-size: 50px;
                color: #C0C0C0;
                padding-top:50px;
                padding-left: 65px;
                }

h3                 {font-family: Minion Pro Cond;
                font-size: 30px;
                color:white;
                }
            
h4                {font-family: Minion Pro Cond;
                font-size:80px;
                color: #D4AF37;
                margin-bottom:0px;
                margin-left: 65px;
                background-color: #04043A;
                }
            
nav li            {list-style:none;
                display: inline;
                margin: 0px 20px 0px 20px;
                }
            
            
nav a            {text-decoration:none;
                color:white;
                }
            
            
nav a:hover     {color: lightblue;
                }
            
nav             {padding:20px 0px 20px 10px;
                background-color: #02021a;
                }
    
nav2 li            {list-style:none;
                margin: 40px 0px 20px 0px;
                    }
            
            
nav2 a            {text-decoration:none;
                color:white;
                }
            
nav2 a:hover     {color: lightblue;
                }
            
nav2             {padding:20px 0px 20px 10px;
                left: 0;
                top: 400px;
                width: 300px;
                }
            
.charakterbox1     {border-style: solid;
                border-color: #D4AF37;
                margin: 20px 20px 20px 65px;
                padding: 20px 20px 20px 55px;
                width: 425px;
                height: 900px;
                float: left;
                font-size: 20px;
                }
            
.charakterbox2     {border-style: solid;
                border-color:#C0C0C0 ;
                margin: 20px 20px 20px 65px;
                padding: 20px 20px 20px 55px;
                width: 425px;
                height: 820px;
                float: left;
                font-size: 20px;
                }
            
.haupttext         {margin-left: 225px;
                margin-top: -350px;
                }

            
.box1             {float: left;
                margin-left: 10%;
                }
                
.hogwarts        {border-style: solid;
                border-color: #D4AF37;
                margin: 125px 10px 20px 10px;
                padding: 10px 20px 10px 20px;
                min-width: 455px;
                max-width: 1000px;
                }
                    
.box2             {float: left;
                max-width: 480px;
                padding-left: 10px;
                font-family: sans-serif;
                font-size: 14px;
                color: white;
                }
            
.test             {position: sticky;
                top:0px;
                }
            
.eb             {margin: 20px 20px 20px 65px;
                }
            
.eb a             {text-decoration:none;
                color: blue;
                }
            
@media only screen and (min-width:1px)
                {.eb {width:535px;}}
@media only screen and (min-width:1265px)
                {.eb {width:1110px;}}
Das sind jetzt zuerst der html und der zugehörige css Code. Ich hoffe es funktioniert so, die Links zu den Bildern fehlen jetzt natürlich. bitte nicht erschrecken, es handelt sich um eine komplette Anfänger Seite für den Schulunterricht.
 

basti1012

Erfahrenes Mitglied
#8
nimm mal das float:left aus der
.charakterbox1 raus dann sollte es gehen.

Zusätzlich empfehle ich dir das
Code:
*{
    margin:0;
  padding:0;
}
in deiner css hinzuzufügen weil wenn deine nav oben angedockt ist siehst du zur zeit rechts daneben den Text vorbei laufen beim Scrollen.Das ist dann auch weg.

Dann noch ein kleiner schönheits fehler.
Wenn man ganz runter Scrollt und unten ankommt springt das ganze Container 20px nach oben.
Das bekommst du Weg wenn du in der .carakterbox1 den unteren margin auf 0 machst.
Zb so
Code:
margin: 20px 20px 0px 65px;
 
Zuletzt bearbeitet:

Sprint

Erfahrenes Mitglied
#9
Zu langsam;), da war basti1012 schneller.

Füg aber noch ein position: -webkit-sticky; mit ein, da der Safari im Moment noch seinen eigenen Präfix braucht.
 

basti1012

Erfahrenes Mitglied
#11
Wie nebeneinander ? Sollen alle Boxen neben ein ander sein ? Dann hast du ja ein breites Fenster von Ca 5000px . Meinst du das ernst ? Wer will schon Horizontal scrollen ?
Aber gut mußt du ja wissen. Kuck dir mal Flexbox an.
A Complete Guide to Flexbox | CSS-Tricks
Da gibt es einmal
Code:
display:flex;
flex-direction:column;
damit die Boxen übereinander angeordnet werden können
und für nebeneinander gibt es dann
Code:
display:flex;
flex-direction:row;
Das wäre jetzt mit die einfachste und sauberste Methode.
Man könnte die Container auch ändern von <div> auf <span> und dann den Container breit genug machen dann sollte es auch gehen.
Aber so ein Fusch wollen wir hier nicht machen also empfehle ich dir mal Flexbox oder wenn du dir mehr zutraust das Grid Layout.
 
#12
Also der Plan war eigentlich, dass je nach breite des Browserfensters, ein, zwei oder drei boxen nebeneinander stehen. Aber ich habe den Tipp bekommen, es einmal mit dem CSS Grid zu probieren, dann werde ich das mal versuchen. Aber danke für die vielen Antworten und Tipps.:)
 

basti1012

Erfahrenes Mitglied
#13
Ich würde das mit Flex machen weil ich mit Flex besser klar komme.
Aber mit Grid geht das auch. Wenn du beides noch nicht gemacht hast wird das Grid lernen wahrscheinlich schwerer sein.Doch wenn du es dann kannst hast du mehr möglichkeiten wie mit den Flexlyout.

Dann probier mal dein Glück und wenn du nicht weiter kommst melde dich einfach.
@media queries wirst du wahrscheinlich dann auch brauchen damit du es dann auf allen Bildscirmgrössen anpassen kannst
 
#14
Also ich habe jetzt eine Lösung für mein Problem gefunden. Ich habe einfach eine unsichtbare weitere div box drunter gesetzt, jetzt bleibt meine Navigation bis zum Schluss stehen. Mir ist zwar durchaus bewusst, dass das keine richtige Lösung ist, aber für den Schulunterricht muss das jetzt einfach so reichen.
 

basti1012

Erfahrenes Mitglied
#15
Ein guter Lehrer sollte eigentlich sagen das es nicht ok ist,weil hier schon die richtigen wege erklärt worden sind.
Aber da man in letzter Zeit aber viel von den Unterrichtstunden höhrt und da auch schon mitbekommen hat das die meisten Lehrer noch bei html 1-4 stehen geblieben sind und auch nix von Flex und Grid kennen wirst du mit der Lösung wahrscheinlich noch bei den Lehrer durchkommen.
Aber du kannst ja mal bescheid geben was der Lehrer dazu sagte ,weil möchte doch gerne wissen ob ich da recht habe
 

Neue Beiträge