I'm trying to get difference between current distance of element from the top and its next position after scrolling. In fact I'm trying to choose animation duration depending on its distance. I wrote the code below but it's not work correctly. Is there any advice to help me. Thanks a lot.
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var scrolingMenuTime=1500;
var hashTagActive = "";
$(".item, .item-f").click(function (ev) {
if(hashTagActive != this.hash) {
ev.preventDefault();
var next = 0;
if ($(this.hash).offset().top > $(document).height() - $(window).height()) {
next = $(document).height() - $(window).height();
} else {
next = $(this.hash).offset().top;
}
var currentPosition=$(this).offset().top;
var diffPos=Math.abs(next-currentPosition);
if (diffPos >= h && diffPos < 2*h){
scrolingMenuTime=1700;
}else if(diffPos >= 2*h && diffPos < 3*h){
scrolingMenuTime=2500;
}else if(diffPost >= 3*h && diffPos < 4*h){
scrolingMenuTime=3500;
}else if(diffPos >= 4*h && diffPos < 5*h){
scrolingMenuTime=4500;
}else if(diffPos >= 5*h){
scrolingMenuTime=5500;}
else{
return false;
}
$('html,body').animate({
scrollTop: next
}, scrolingMenuTime, 'easeOutBack');
hashTagActive = this.hash;
location.hash = '';
}
});
And also I have to tell that when I delete the "if and else if" section then the code works correctly. What is the wrong with "if and else if" section?
Aucun commentaire:
Enregistrer un commentaire