Elemente sollen nur bis zu einem bestimmten Punkt gescrollt werden

Meggie09

Grünschnabel
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
 
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;
}
 
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?
 
Funktioniert soweit ganz gut, nur am letzten ende der Seite verschwindet der teil beim scrollen doch wieder mit nach oben
Dürfte eigentlich nicht sein. Ich habe das selber schon einige Male verwendet und der betroffene Bereich bleibt immer stehen. Hast du die Seite schon irgendwo online, daß man das mal sehen kann?
 
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.
 
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.
 
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:
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 , so wie du schon sagtest, funktioniert das ganze wenn ich float:left aus .charakterbox1 herausnehme. Gibt es dann eine andere Möglichkeit, die div boxen nebeneinander zu stellen?
 
Zurück