2015-02-21 2 views
1

Я пытаюсь двигаться и исчезать div при прокрутке вниз, эффект затухания в порядке, но не может заставить его двигаться влево.Перемещение div на scrolldown

Любая помощь? Спасибо !!!

Вот скрипку http://jsfiddle.net/z7E9u/1203/

var moveStart=100 // 100px scroll or less will equiv to 1 opacity 
,moveUntil=900 // 900px scroll or more will equiv to 0 opacity 
,moving = $('#fading') 
; 

$(window).bind('scroll', function(){ 
var moveoffset = $(document).scrollTop(), 
    right=0 
; 
if(moveoffset<=moveStart){ 
    right=0; 
}else if(moveoffset<=moveUntil){ 
    right=500-moveoffset/moveUntil; 
} 
// fading.css('opacity',opacity).html(opacity); 
fading.css('right',right); 
}); 
+0

Не могу ли это переместить lefT? –

+0

Да. Нельзя заставить его двигаться влево. – hernandus

+1

Пожалуйста, объясните. что ты хочешь ?? –

ответ

0

Так что вам нужно fade & move элемент влево.
Сначала вам нужно получить% суммы позиции scrollTop относительно фиксированного значения (900).

Для преобразования 900 до 100% и получить текущий scrollTop% вам нужна эта математика:

currentPercent = Math.ceil(DocScrollTop * 100/maxValue); // Current percent (0-100) 

так в ваш код должен быть как:

jsFiddle demo

var max = 900, 
    $el = $('#fading'); 

$(window).on('scroll', function(){ 
    var scrollPerc = Math.ceil($(this).scrollTop() * 100/max); 
    $el.css({ 
     opacity : 1-scrollPerc/100, // 1 to 0 
     right : scrollPerc+"%" // 0% to 100% 
    }); 
}); 
+0

Roko, это пример большой. Но в случае, если мне просто нужно переместить div 400px влево, как мне установить этот предел ?. – hernandus

Смежные вопросы