Mit "position: sticky" Container/Element ab einer bestimmten Position festsetzen

Um alle Funktionen nutzen zu k�nnen, aktivieren Sie bitte JavaScript in ihrem Browser!

Der Treffpunkt f�r Hilfe, Tricks & Tipps � XOBOR-Foren und Homepages � Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps � Mit "position: sticky" Container/Element ab einer bestimmten Position festsetzen

Themen-Einstellungen

Thema drucken

Bereich wechseln

Start Willkommen! Ank�ndigungen & Termine, wichtige News! Stellen Sie Ihr eigene Webseite vor! Betriebssystem MS Windows & andere Betriebssysteme Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps MS Windows 11, 10, 8 und 7 - Fragen & Antworten Linux, Ubuntu und andere Betriebssysteme �rger mit dem PC, Laptop oder Tablet? �rger mit dem PC, Laptop oder Tablet - Vorbeugung und Hilfe �rger mit dem PC, Laptop oder Tablet - Fragen & Antworten Fragen zu DSL, VDSL, LTE und anderen Netzempfangsarten XOBOR-Foren und Homepages Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten Das neue Template Xobor (v6) Energieerzeugung im neuen Zeitalter - Revolution�r! Videos und Webseiten zur Freien Energie Wasserstoff - Energietr�ger der Zukunft. Die besten Links Empfehlenswerte und interessante Links! Link - Suche Verschiedenes Faszinationen & Unglaubliches! Tricks & Tipps f�r Smartphones und iPhones Lob, Kritik & Verbesserungsvorschl�ge Spiel & Spa�, Witz & gute Laune! Spiritualit�t, Seele, New Age, Yoga, Gesundheit Alles, was noch so �brig bleibt Bannertausch Wie funktioniert der Bannertausch? Bannerrotation und Bannerwechsel

#1 | Mit "position: sticky" Container/Element ab einer bestimmten Position festsetzen datum

27.09.2017 17:04 (zuletzt bearbeitet: 27.09.2017 19:52)

basti

Informationen anzeigen

Beitr�ge:	2
Registriert seit:	27.08.2016

Homepage:	Nicht angegeben
Letzte Spende	Betrag � Forum Spende
Sternzeichen	Nicht angegeben
Likes	1

Hallo Leute,
ich habe ein tolles Script gefunden, welches nun endlich einen Container/Element ab einer bestimmten Position festsetzen. CSS3 ist jedoch Neuland für mich und ich könnte ein bisschen Hilfe gut gebrauchen.

Das ist die Funktion:

1
2
3
4
5
6
 

.sticky {
  position: -webkit-sticky;
  position: sticky;
}
 
 

Schlie�en

Ich habe folgendes eingesetzt:

CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 

#one { position: sticky; top: 0px; }
* {
  box-sizing: border-box;
}
 
dl > div {
  padding: 0 0 0 0;
}
 
dt {
 
  margin: 0;
  padding: 0;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
}
 
dd {
  margin: 0;
  padding: 0 0 0 0;
  white-space: nowrap;
}
 
dd + dd {
  padding:0;
}
 
 

Schlie�en

Code (Body):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
 

 
 <!--  left  //-->
 <div class="left" style="float:left;width:200px;margin:0 10px 0 0;">
<!--  fixedDiv  //-->
<div id="one" class="left" style="position: sticky; top: 0px;float:left;width:200px;">
  <dt>
<!--  DU  //-->
<div style="float:left;">
<h1><b>DU</b></h1>
<!--  DU  //-->
</div>
<!--  BUTTON  //-->
<div style="float:left;">
<a href="" class="button" title="Pinnwand">
<div style="float:left;">
<img src="files/gfx/pinnwand-ico.png" alt="" border="0" width="18" height="18" style="float:left;padding:0;margin:1px 5px 0 0">Pinnwand
</div>
</a>
<!--  BUTTON  //-->
</div>
<!--  BUTTON  //-->
<div style="float:left;">
<a href="" class="button" title="Nachrichten">
<div style="float:left;">
<img src="files/gfx/pm-ico.png" alt="" border="0" width="18" height="18" style="float:left;padding:0;margin:1px 5px 0 0">Nachrichten(<b>0</b>)
</div>
</a>
<!--  BUTTON  //-->
</div>
<!--  FEATURES  //-->
<div style="float:left;">
<h1><br><br><b>FEATURES</b></h1>
<!--  FEATURES  //-->
</div>
<!--  BUTTON  //-->
<div style="float:left;">
<a href="" class="button" title="Videos">
<div style="float:left;">
<img src="files/gfx/video-ico.png" alt="" border="0" width="18" height="18" style="float:left;padding:0;margin:1px 5px 0 0">Videos
</div>
</a>
<!--  BUTTON  //-->
</div>
<!--  BUTTON  //-->
<div style="float:left;">
<a href="" class="button" title="Kanäle">
<div style="float:left;">
<img src="files/gfx/kanale-ico.png" alt="" border="0" width="18" height="18" style="float:left;padding:0;margin:1px 5px 0 0">Kanäle
</div>
</a>
<!--  BUTTON  //-->
</div>
<!--  BUTTON  //-->
<div style="float:left;">
<a href="" class="button" title="Musik">
<div style="float:left;">
<img src="files/gfx/musik-ico.png" alt="" border="0" width="18" height="18" style="float:left;padding:0;margin:1px 5px 0 0">Musik
</div>
</a>
<!--  BUTTON  //-->
</div>
<!--  BUTTON  //-->
<div style="float:left;">
<a href="" class="button" title="Seiten">
<div style="float:left;">
<img src="files/gfx/seiten-ico.png" alt="" border="0" width="18" height="18" style="float:left;padding:0;margin:1px 5px 0 0">Seiten
</div>
</a>
<!--  BUTTON  //-->
</div>
<!--  BUTTON  //-->
<div style="float:left;">
<a href="" class="button" title="Blogs">
<div style="float:left;">
<img src="files/gfx/blogs-ico.png" alt="" border="0" width="18" height="18" style="float:left;padding:0;margin:1px 5px 0 0">Blogs
</div>
</a>
<!--  BUTTON  //-->
</div>
<!--  BUTTON  //-->
<div style="float:left;">
<a href="" class="button" title="Fotos">
<div style="float:left;">
<img src="files/gfx/foto-ico.png" alt="" border="0" width="18" height="18" style="float:left;padding:0;margin:1px 5px 0 0">Fotos
</div>
</a>
<!--  BUTTON  //-->
</div>
<!--  BUTTON  //-->
<div style="float:left;">
<a href="" class="button" title="Spiele">
<div style="float:left;">
<img src="files/gfx/spiele-ico.png" alt="" border="0" width="18" height="18" style="float:left;padding:0;margin:1px 5px 0 0">Spiele
</div>
</a>
<!--  BUTTON  //-->
</div>
<!--  BUTTON  //-->
<div style="float:left;">
<a href="" class="button" title="Markt">
<div style="float:left;">
<img src="files/gfx/markt-ico.png" alt="" border="0" width="18" height="18" style="float:left;padding:0;margin:1px 5px 0 0">Markt
</div>
</a>
<!--  BUTTON  //-->
</div>
<!--  BUTTON  //-->
<div style="float:left;">
<a href="" class="blue" title="Mehr">
<div style="float:left;padding:10px;">
<b>Mehr</b>
</div>
</a>
<!--  BUTTON  //-->
</div>
</dt>
 <!--  fixedDiv  //-->
</div>
 
 <!--  /left  //-->
</div>
 
 

Schlie�en

Das ganze soll dann wie in Facebook ausschauen. Nur wenn ich runter scrolle, dann scrollt er schon mit und bleibt ab einer bestimmten Position stehen. Jedoch wenn ich weiter runter scrolle bleibt er irgendwann nicht mehr stehen (der Container).

Vielleicht hat jemand einen Tipp xD

Grüße

Dem Begeisterten ist kein Ding unmöglich

Antworten

#2 | RE: Mit "position: sticky" Container/Element ab einer bestimmten Position festsetzen datum

04.10.2017 13:14

Hallo, ich schreibe das komplette Layout, damit man einen besseren Eindruck gewinnt. Die Navigation soll mitscrollen und dann aber während dem Scrollen stehenbleiben.

Dem Begeisterten ist kein Ding unmöglich

Wolfgang findet das Top!

Antworten

Link-Sicherheit für "target" erhöhen! � � "Thema melden" farblich anpassen!

�hnliche Themen

Antworten

Letzter Beitrag

Mitgliederliste - Code mit Filterung
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von Anne 2 01.07.2023 18:23
Anne • Zugriffe: 334
Bilderalbum nur für bestimmte User
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von charlie1965 2 15.01.2023 19:06
Kipper-Spedition • Zugriffe: 356
Begrüßung, Nachricht oder Mitteilung an einen bestimmten User beim Einloggen!
Erstellt im Forum Das neue Template Xobor (v6) von Nara 20 18.11.2023 13:01
Wolfgang • Zugriffe: 3247
Iconbar & Navileiste fixieren - Teil 1(2)
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang 2 02.04.2020 20:50
Wolfgang • Zugriffe: 2367

Smileys für Themen-Markierungen einfügen und bearbeiten! - Teil 1+2
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Hilfe, Tricks & Tipps von Wolfgang

16.06.2023 18:30
von

Kipper-Spedition • Zugriffe: 2287

Smileys in der Schnellantwort - Für alle Templates, für bestimmte Mitglieder!
Erstellt im Forum Alles f�r Ihr eigenes Forum oder Ihrer Webseite - Fragen & Antworten von

22.11.2023 20:38
von

Wolfgang • Zugriffe: 20086

Position der Desktop-Icons speichern, mit "DesktopOK"
Erstellt im Forum Betriebssystem MS Windows 11, 10, 8 und 7 - Tricks & Tipps von Wolfgang 0 16.05.2008 23:49
Wolfgang • Zugriffe: 2200
Ich suche eine bestimmte Webseite!!!
Erstellt im Forum Link - Suche von Wolfgang 0 09.01.2007 12:10
wolf.andres • Zugriffe: 1657

Foren Spende

Hallo !

Wir hoffen, dass Dir unser Forum gef�llt und Du Dich hier genauso wohlf�hlst wie wir.

Um Dir und den anderen Mitgliedern das Bestm�gliche bieten zu k�nnen, w�rden wir das Forum gern werbefrei gestalten, mit tollen neuen Extras erg�nzen.

Wenn Du uns dabei unterst�tzen m�chtest, kannst Du mit Hilfe einer kleinen Spende dazu beitragen.

Deine Spende hilft!

Spendenziel: 45 €

Forum - Mit "position: sticky" Container/Element ab einer bestimmten Position festsetzen

Forum Lesezeichen ❌