滚动时淡出并向上移动

Question

The following script I am using fades out the div with the class .fader when scrolling down, it does not fads it out instantly but bit by bit while scrolling.

Everything is working, but how can I also make it so the div moves up while the fading effecting is taking place?

 //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

Please replace below line ...

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

with

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

You have to use bind ...

Answer 2

You can use:

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

Edit:

I don't really understand your desired effect but is this what you want?:

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