Содержимое исчезает в зависимости от положения прокрутки

Question

У меня есть функция, установленная ниже, для постепенного исчезновения/в определенном контенте на основе ее близости к верхней/нижней части страницы. Желаемый эффект довольно заметен и очевиден, если вы нажмете на ссылку «О» вверху, но если вы используете кнопку «WORK» для прокрутки вниз, содержимое просто появляется в правильной позиции, но замирание не происходит, как в случае с верхним ,

Я уверен, что что-то делать с эквивалентом scrollBottom я создал, но не знаю, как идти о фиксации этого

http://coreytegeler.com/new

$(window).load(function(){ 
     $(window).scroll(function() { 
     var st = $(window).scrollTop(); 
     var sb = $(document).height() - $(window).height() - $(window).scrollTop(); 
     $('#about .content').css({'opacity' : (1 - st/450)}); 
     $('#work .content').css({'opacity' : (450 + sb*-1)}); 

     $('#home .content').css({'opacity' : (-(450 + sb*-1))}); 
     $('#home .content').css({'opacity' : (-(1 - st/450))}); 
     }); 
    }); 

Answer 1

В моем браузере, ваша страница загружается высоту документа 2892 и высоту окна 952. Включение этих измерений в ваши уравнения дает непрозрачность #work, варьирующуюся от -1478 до 450. Это начинает отображаться, когда окно составляет 450 пикселей снизу, полностью затухающее, когда окно 451px снизу - возможно, немного быстрее, чем вы планировали.

Если изменить рабочую линию

$('#work .content').css({'opacity' : ((450 + sb*-1)/450)}); 

тогда ваша непрозрачности будет варьироваться от -3.28 до 1, пересекая 0 и начинает исчезать, когда окно прокрутил 450 пикселей со дна, достигнув 1,00 (100% исчезает), когда окно прокручивается полностью вниз.