Div soll beim herunterscrollen mitwandern

[danielx11]

AW: Div soll beim herunterscrollen mitwandern

Dafür benötigst du keine JS Kenntnisse. Das Menü kannst du auch mit reinem CSS formatieren. Ob nun mit einer Positionierung, Margin, Padding oder sonst etwas, das bleibt dir überlassen...

Das klappt leider nicht. Das Menü ist generell schon, sagen wir mal 350px vom oberen Browserrand entfernt. Scrolle ich nun nach unten, dann behält er diesen Abstand stets bei, anstatt das Menü oben zu positionieren. Da hilft auch kein margin-top -350px o.ä. weil das Menü sonst bei der Ausgangsposition zu weit oben wäre, dafür dann aber nach dem Scrollen stimmig dargestellt wird. Die Position ist absolute...

 

[CrazyLopp]

AW: Div soll beim herunterscrollen mitwandern

Das klappt leider nicht. Das Menü ist generell schon, sagen wir mal 350px vom oberen Browserrand entfernt. Scrolle ich nun nach unten, dann behält er diesen Abstand stets bei, anstatt das Menü oben zu positionieren. Da hilft auch kein margin-top -350px o.ä. weil das Menü sonst bei der Ausgangsposition zu weit oben wäre, dafür dann aber nach dem Scrollen stimmig dargestellt wird. Die Position ist absolute...

Ok, jetzt habe ich verstanden was du meinst. Ist relativ simpel zu lösen. In dem Tutorial werden ja als Standartwerte für Top 0px verwendet (im HTML bz. Inline-Style). Dort trägst du als erstes deinen eigenen Wert ein damit von Anfang an die richtige Position erreicht ist.

Nun kommt doch etwas Javascript ins Spiel, denn du musst die aktuelle Position der Navigation abfragen. Hierzu kannst du folgenden Abfrage innerhalb der setNavPosition eintragen:

if(targetPosition == 0) {
	$('#navigation').animate({top: "250"}, 1000);
}

Nun wandert die Navigation automatisch wieder nach unten sobald sie auf 0 steht. Sofern Du jedoch nicht möchtest das sie wieder runter wandert, sondern ab einer gewissen Anzahl von Pixel nach Oben stehen bleibt, so kannst du den Codeblock, der oben steht wieder löschen und musst nur diesen Abschnitt deinen Wünschen anpassen:

try {
   if (document.body.scrollTop > document.documentElement.scrollTop) {
      var targetPosition = document.body.scrollTop;
   } else {
      var targetPosition = document.documentElement.scrollTop + 120;
   }
}

Dort wo die 120 stehen kannst du deinen gewünschten Wert eintragen. Es bedeutet einfach nur das er mindestens 120 Pixel von oben Platz halten soll sofern die Navigation wieder nach oben rutsch. Probier es einfach mal aus, ich habe es nur mal kurz im Chrome gestetet, sollte aber auch in den anderen Browsern funktionieren...


Beste Grüße

 

[Pixelaner]

AW: Div soll beim herunterscrollen mitwandern

http://jsfiddle.net/dY9QN/1/

Einfach den JS Code kopieren und lächeln

 

[danielx11]

AW: Div soll beim herunterscrollen mitwandern

der oben steht wieder löschen und musst nur diesen Abschnitt deinen Wünschen anpassen:

try {
   if (document.body.scrollTop > document.documentElement.scrollTop) {
      var targetPosition = document.body.scrollTop;
   } else {
      var targetPosition = document.documentElement.scrollTop + 120;
   }
}

Hallo CrazyLopp! Vielen Dank für deinen Support. Aber leider hat das nicht funktioniert. Hat keinen Unterschied gezeigt und die Navibox (heißt bei mir #Quicklink) hat nach oben hin dennoch einen zu großen Abstand nach dem Schollen. So sieht der Code aktuell aus:

try {
window.onscroll = setNavPosition;
	if(targetPosition == 0) {
	$('#quicklink').animate({top: "0"}, 1000);
}
}

catch(e) {
document.documentElement.onscroll = setNavPosition;
}
function setNavPosition(){
$('#quicklink').stop();
try {
if (document.body.scrollTop > document.documentElement.scrollTop) {
var targetPosition = document.body.scrollTop;
}
else {
var targetPosition = document.documentElement.scrollTop + 150;
}}
catch(e) {
var targetPosition = document.documentElement.scrollTop;
}
$('#quicklink').animate({top: targetPosition}, 1000);
}

 

[danielx11]

AW: Div soll beim herunterscrollen mitwandern

http://jsfiddle.net/dY9QN/1/

Einfach den JS Code kopieren und lächeln

Hallo Pixelaner,

merci! Habs wie folgt eingebunden:

var element = $('#quicklink'), // Deine Navigation (Ex: Klasse .menu)
        position = element.offset(),
        padding = 20;
    $(window).scroll(function(){
        if($(window).scrollTop() > position.top ) {
            element.stop().animate({ marginTop: $(window).scrollTop() - position.top + padding },1000);
        } else {
            element.stop().animate({ marginTop:0 });
        }
    }); ​

Da passiert dann allerdings überhaupt nichts. Die DIV-Box bleibt oben stehen.

 

[Pixelaner]

AW: Div soll beim herunterscrollen mitwandern

sorry, #quicklink musst du per css

position:absolute;

zuweisen.

 

[danielx11]

AW: Div soll beim herunterscrollen mitwandern

sorry, #quicklink musst du per css

position:absolute;

zuweisen.

das ist es bereits...

 

[Pixelaner]

AW: Div soll beim herunterscrollen mitwandern

js ist eingebunden ? ansonsten schau mal in die fehlerkonsole deines browsers ob dort ein eintrag hinterlegt ist

 

[danielx11]

AW: Div soll beim herunterscrollen mitwandern

js ist eingebunden ? ansonsten schau mal in die fehlerkonsole deines browsers ob dort ein eintrag hinterlegt ist

js ist eingebunden. Das andere Script aus dem Tutorial funktioniert ja, bis auf den Abstand nach oben.

Fehlerkonsole zeigt nichts an.

 

[CrazyLopp]

AW: Div soll beim herunterscrollen mitwandern

try {
window.onscroll = setNavPosition;
	if(targetPosition == 0) {
	$('#quicklink').animate({top: "0"}, 1000);
}
}

catch(e) {
document.documentElement.onscroll = setNavPosition;
}
function setNavPosition(){
$('#quicklink').stop();
try {
if (document.body.scrollTop > document.documentElement.scrollTop) {
var targetPosition = document.body.scrollTop;
}
else {
var targetPosition = document.documentElement.scrollTop + 150;
}}
catch(e) {
var targetPosition = document.documentElement.scrollTop;
}
$('#quicklink').animate({top: targetPosition}, 1000);
}

Lösche mal folgendes aus deinem Code:

if(targetPosition == 0) {
	$('#quicklink').animate({top: "0"}, 1000);
}

Dann sollte es funktionieren...

 

[Pixelaner]

AW: Div soll beim herunterscrollen mitwandern

neuste jquery version eingebunden ?

habe dir mal ein funktionierendes script auf jsfiddle gepackt: http://jsfiddle.net/VG4sG/

 

[danielx11]

AW: Div soll beim herunterscrollen mitwandern

Lösche mal folgendes aus deinem Code:

if(targetPosition == 0) {
	$('#quicklink').animate({top: "0"}, 1000);
}

Dann sollte es funktionieren...

habe ich gemacht. Funktioniert so wie vorher, nur dass die Box eben nach dem Scrollen zu weit unten ist anstatt am oberen Browserrand.

 

[CrazyLopp]

AW: Div soll beim herunterscrollen mitwandern

habe ich gemacht. Funktioniert so wie vorher, nur dass die Box eben nach dem Scrollen zu weit unten ist anstatt am oberen Browserrand.

Lade dann ml bitte deinen kompletten Quellcode hoch, dann kann man den Fehler schneller finden

Edit meint noch:
Ich hänge dir mal meine modifizierten Tutorialdateien in den Anhang, denn vielleicht habe ich dich ja wieder falsch verstanden und du meinst etwas ganz anderes....

 

[danielx11]

AW: Div soll beim herunterscrollen mitwandern

hab gerad Feedback bekommen, dass die Lösung nicht mehr in Frage kommt.
Spitze! Könnt kotzen. Dennoch Danke für den Support!! Sorry.

 

[Pixelaner]

AW: Div soll beim herunterscrollen mitwandern

ich hab dir doch nen jsfiddle link rübergeschickt. was ist denn damit ?

 

[danielx11]

ich hab dir doch nen jsfiddle link rübergeschickt. was ist denn damit ?

Hallo Pixelaner,

merci dafür! Aber das hatte leider auch nicht geklappt. Keine Ahnung wieso nicht. Jquery ist aktuell.

Edit meint noch:
Ich hänge dir mal meine modifizierten Tutorialdateien in den Anhang, denn vielleicht habe ich dich ja wieder falsch verstanden und du meinst etwas ganz anderes....

Vielen Dank. Werd ich archivieren, kann es sicherlich noch mal gebrauchen.
Der Link hat gerade noch nicht funktioniert.

 

[CrazyLopp]

AW: Div soll beim herunterscrollen mitwandern

Hat einen kleinen Tippfehler gehabt:

Jetzt aber...

 

[danielx11]

AW: Div soll beim herunterscrollen mitwandern

geht der Link bei dir?