CSS: Positionierung von Div-Containern

Computer: Software & Programmierung HTML & CSS
#1

Hallo zusammen,

folgendes Problem:

ich habe 3 Div Container untereinander
Höhe des ersten Divs 200px
Höhe des zweiten Divs 100px
Höhe des dritten Divs 2000px

Nun ist der Benutzer ja gezwungen, nach unten zu scrollen um das Ende des dritten Divs zu sehen.

Jetzt soll es aber so sein, dass Div Nummer 2 nach oben wegfließt (genau so wie Div Nummer 1), aber eben NICHT verschwindet, sondern sich am oberen Rand positioniert, und der Inhalt von Div Nummer 3 darunter hinwegfließt.

Beim nach oben scrollen der genau spiegelverkehrte Weg:

Sobald Div Nummer 1 wieder sichtbar wird, „schiebt“ dieses Div No. 1 Div No. 2 wieder max 200 px nach unten.

Geht so was? Wenn ja: any suggestions?

Viele Grüße

Midir

#2

Hallo Midir,

Sobald Div Nummer 1 wieder sichtbar wird, „schiebt“ dieses Div
No. 1 Div No. 2 wieder max 200 px nach unten.
Geht so was? Wenn ja: any suggestions?

nur mit css nicht … es sei denn, du möchtest das 2.div immer in fester position haben ( position:fixed )

mit javascript ungefähr so:
mittels onscroll-event den pageYOffset auslesen, bißchen rechnen und style.top des divs verändern

Gruß
Klaus

#3

Hallo Klaus,

vielen Dank erstmal… werd ich versuchen

Grüße

Midir*

#4

Hallo Midir,

vielen Dank erstmal… werd ich versuchen

dann gebe ich Dir mal einen Anfang:


div {margin:0px;position:relative;}
#div1{border:1px solid blue;height:200px;}
#div2{border:1px solid red;height:100px;}
#div3{border:1px solid green;height:2000px;}
div1
div2
div3


var elem = document.getElementById(‚div2‘);
var pos= 200;
window.onscroll = function () {
var scroll = window.pageYOffset;
if ( scroll > pos ){
var neu=scroll - pos ;
elem.style.top= neu + „px“;
}
}

muss natürlich noch erweitert ( z.B. für IE scrollTop ) und verfeinert werden ( div2 geht nicht ganz auf die alte position )

Gruß
Klaus

1 Like
#5

KLAUS!! Du bist ne Maus - hätte ich fast gesagt :smile:

Ne… im Ernst: Danke!
Hat mich schon mal einen RIESEN- Schritt weitergebracht!

Obwohl ich das mit dem Scroll-top noch nicht ganz gecheckt habe, muss ich ehrlich zugestehen. Denn es ist, wie Du gesagt hast: im IE funktioniert es nicht…

nochmals Danke

Grüße

Midir

#6

Hallo Midir,

Ne… im Ernst: Danke!

bitte … gern geschehen

Obwohl ich das mit dem Scroll-top noch nicht ganz gecheckt
habe, muss ich ehrlich zugestehen. Denn es ist, wie Du gesagt
hast: im IE funktioniert es nicht…

um im IE die pixel des scrolls zu bekommen, muss sowas rein:


if( document.body ){ var scroll = document.body.scrollTop }

um diverse Browser „aufzuspüren“ findest Du über Google bestimmt jede Menge Beispiele und Möglichkeiten.

Gruß
Klaus

1 Like
#7

Hallo Klaus,

*PERFEKT*

Danke!

ICh habe den Ansatzt ein wenig verändert. Die Sache mit der fehlerhaften Positionierung war ein no-go, da ds DIV immer -ich möchte sagen - pixelgenau positioniert werden muss.

Also, da in diesem Div aber sonst nichts großartiges drinsteht, habe ich es einfach kopiert (Div4) und auf hidden gesetzt.

Jetzt tuts das, was es soll!

Merci

Midir

===================anbei Quelltext============================

div {margin:0px;position:relative;}
#div1{border:1px solid blue;height:200px;}
#div2{border:1px solid red;height:100px;}
#div3{border:1px solid green;height:1000px;}
#div4{border:1px solid red;height:100px; color:#09F; position:fixed; top:0px; left:0px;}
div1
div2
div3
div4

var pos= 200;
window.onscroll = function () {
var scroll = window.pageYOffset;
<!–[if IE]>
var scroll = document.documentElement.scrollTop ;
<!–<![endif]–>
if ( scroll > pos ){
document.getElementById(‚div4‘).style.visibility = ‚visible‘;
}
if ( scroll < pos) {
document.getElementById(‚div4‘).style.visibility = ‚hidden‘;
}
}

#8

Hallo Midir,

Jetzt tuts das, was es soll!

aber nur im IE :smile:)

was passiert, wenn es nicht der IE ist?
.
.
.
.

dann ist scroll immer 0
also besser mit der bereits genannten if-Abfrage

Gruß
Klaus

1 Like
#9

Hallo Midir,

ICh habe den Ansatzt ein wenig verändert. Die Sache mit der
fehlerhaften Positionierung war ein no-go, da ds DIV immer
-ich möchte sagen - pixelgenau positioniert werden muss.

o.k. … ich habe es mal so „verfeinert“, dass es nach dem scrollen wieder pixelgenau unter div1 ist:


div {margin:0px;position:relative;}
#div1{border:1px solid blue;height:200px;}
#div2{border:1px solid red;height:100px;}
#div3{border:1px solid green;height:2000px;}
div1
div2
div3

var elem = document.getElementById(‚div2‘);
var pos= 200;
window.onscroll = function () {
var scroll = window.pageYOffset;
if( document.body ){ scroll = document.body.scrollTop;}
if ( scroll > pos ){
var neu=scroll - pos ;
elem.style.top= neu + „px“; }
window.setTimeout(„test()“, 50);
}

function test(){
var scroll = window.pageYOffset;
if( document.body ){ scroll = document.body.scrollTop;}
if ( scroll < 2 ){elem.style.top= 0 + „px“;}
}

Gruß
Klaus

1 Like
#10

Hallo nochmals, Klaus,

Du bist definitiv mein persönliches JS-Highlight in 2010! :smile:

Danke für Deine Hilfe und Deine Mühe!

Jetzt ists wunderbar!

Einen guten Rutsch wünscht

Midir

#11

Hallo Midir,

Jetzt ists wunderbar!

Moment!!!
Es geht noch besser :smile:)
Bei der function test hatte ich die Verwendung des mouse-scroll-rades berücksichtigt … das sind ja ziemlich große scroll-sprünge … und das div blieb zu weit unten hängen.

Aber … sobald div1 wieder ins Bild kommt, sollte ja div2 darunter gepackt werden.

Darum unter diese if-Abfrage

if ( scroll > pos ){
var neu=scroll - pos ;
elem.style.top= neu + „px“;}

noch dieses else einfügen

else {elem.style.top= „0px“;}

Gruß und guten Rutsch
Klaus

1 Like