Das ganze funktioniert EINWANDFREI ohne animate bzw mit kürzerem animate sinkt die Zeit der Blokade -> Das Animate am ende des Codes (66)
JavaScript
function scrollToNext(){
//Aktuellen Scroll Status auslesen
var scroll = $(window).scrollTop();
//Die ID's der zu überwachenden Elemente
var keys = new Array('start','overme','references','contact');
//Aktuelle scrolling position
var windowH = $(window).height();
var LastDist;
var obj = {};
//Für jedes Elem.
$.each( keys, function( i, elemID ) {
//Die Höhe von body 0
var staticTop = parseInt( $('#'+elemID).offset().top );
//Die Höhe des Elementes
var height = parseInt( $('#'+elemID).height() );
//Die Distanz zwischen aktueller Scrollpos und dem element
var dist = parseInt( staticTop - scroll );
//Ein obj mit den Daten erstellen
obj[elemID] = {
'top':staticTop,
'height':height,
'dist':dist
};
LastDist = dist;
//Prüfen ob das ELem schon komlpett sichtbar ist
//Wenn abstand + Höhe + 300px spielraum noch auf den Bilschirm passen, ist die unterkamte des elem. schon sichtbar
if (dist+height+300 < windowH) {
//noch zum obj hinzufügen
$.extend( obj[elemID], {'seen':true} );
}
else{
//noch zum obj hinzufügen
$.extend( obj[elemID], {'seen':false} );
}
});
//console.log(obj);
var nearest;
//Das nähste Element ermitteln -> unterhalb der browseroberkante!
$.each( obj, function( id, value ) {
//Ermitteln ob ein anderes element schon näher ist
if (obj[i]["dist"] <= LastDist && obj[id]["dist"] >= 0) {
//Die ID speichern
nearest = id;
//Und die distanz speichern
LastDist = obj[id]["dist"];
};
});
//Prüfen ob das Davorige element schonn seen ist
var actI;
//arr key von nearest ermitteln
$.each( keys, function( i, value){
if (value == nearest) {
actI = i;
};
});
var prevNAME = keys[actI-1];
//console.log(nearest+':'+obj[nearest]['seen']);
//Wenn komplett gesehen
if (obj[prevNAME]['seen'] === true) {
//Animiert hinscrollen
//HIER IST MEINER MEINUNG ANCH DER FEHLER
$("html, body").animate({
scrollTop: obj[nearest]['top']
}, 200
);
console.log('jumped to:'+nearest);
};
}
Alles anzeigen
Beispiel kommt später!
Edit, glaue Fehler gefunden zu haben... Wird bei jedem Scroll getriggert.. 10x200ms macht doch ein bischen Zeit aus ..
Eine echte Lösung ist es nicht aber eine abhilfe .. statt 14 triggern nurnoch 5 .. dafür auch eindeutig weniger genauigkeit
Ich habe den trigger auf 1 mal pro 50ms gedrosselt..
JavaScript
//Beim RUNTER scrollen funct ausführen
$(function(){
var letzerScroll = 0;
var i = 0;
$(window).scroll(function(event){
if (i == 0) {
var position = $(this).scrollTop();
if (position > letzerScroll){
scrollToNext();
};
letzerScroll = position;
setTimeout(function() {
i = 0;
}, 50);
};
i++;
});
});
Alles anzeigen
Wenn jemand eine bessre Lösung außer .one() einfällt (das wollte nicht kompatibel sein ) der schreibe sie doch bitte!