How to fade in while scroll down with jquery

Question

I want to make the logo fade in while scroll goes down. For example;

if scroll position is 10px:

-opacity of logo is 0.1

if scroll position is 100px:

-opacity of logo is 1.0

$(window).scroll(function() {
    var st=$(window).scrollTop();
    $('.logo-min').animate({opacity: st});
});

this code doesn't work. It does not have errors but logo's opacity is always changing whether im not changing the scroll pixel

Answer 1

You should assign a time range to your animate function like below:

$(window).scroll(function() {
   var st=$(window).scrollTop();
   $('.logo-min').animate({opacity: st/100},1); // 1 is in miliseconds
});

Answer 2

Try

$('.logo-min').fadeIn("slow");

There is a corresponding fadeOut() function as well.