Затухание и движение вверх при прокрутке

Question

Следующий скрипт, который я использую, исчезает из div с классом .fader при прокрутке вниз, он не приманивает его мгновенно, но постепенно по прокрутке.

Все работает, но как я могу сделать так, чтобы div двигался вверх, пока происходит эффект выцветания?

//Fade Index on Scroll// 
    var divs = $('.fader'); 
     $(window).on('scroll', function() { 
    var st = $(this).scrollTop(); 
     divs.css({ 'opacity' : (1 - st/300) }); 
    }); 

    $(window).scroll(function() { 
    if ($(this).scrollTop()>300) { 
     $('.fader').fadeOut(); 
    } else { 
     $('.fader').show(); 
     } 
    }); 

HTML:

<div id="top-section"> 
    <div class="content fader"> 
     <h1>I support and guide you through the process of <span>change</span>, <span>growth</span> and <span>personal evolution</span>.</h1> 
    </div> 
</div> 

CSS:

@media screen and (min-width: 1024px) { 

     #top-section { 
      color: #fff; 
      height: 720px; 
      width: 1024px; 

      position: relative; 
      padding: 100px 20px; 
      margin: auto; 
     } 

     #top-section .fader { 
      width: 400px; 
      padding-top: 170px; 
      position: fixed; 
     } 

    } 

Live Preview: http://www.life-conversations.com/

Answer 1

Пожалуйста, замените ниже линии ...

$(window).on('scroll', function() { 

с

$(window).bind('scroll', function() { 

Вы должны использовать bind ...

Answer 2

Вы можете использовать:

$(".fader").animate({"opacity":(1 - st/300), "top": "-"+(st/300)},200); 

Edit:

Я не очень понимаю, нужная эффект, но это то, что вы хотите ?:

$(".fader").animate({"opacity":(1 - st/300), "top": "-"+st},50);