changing opacity while scrolling is not working

I'm trying to make a div fade in and out using opacity while scrolling here's the js code

$(document).ready(function(){
        window.onscroll = scrolls;
    });
    function scrolls(){
        var offset = $("#scrollMore").offset();
        var w = $(window);
        var welcome = offset.top-w.scrollTop();
        console.log(welcome);
        if(welcome<100) {
            $("#scrollMore").fadeTo("slow",1);
        }
        else if(welcome>=100){
            $("#scrollMore").fadeTo("slow",0.1);
        }
    }

css

#scrollMore {
        background: url("http://www.wiltshirefarmfoods.com/images/scrollMore.png") no-repeat scroll center bottom transparent;
        cursor: pointer;
        height: 42px;
        right: 36px;
        text-indent: -9999px;
        width: 124px;
        z-index: 100;
        float: left;
        opacity: 0.1;
    }

But it's not working it's taking so long time to fade in and out here's jsfiddle http://jsfiddle.net/jery0cdp/3/ UPDATE after using the code of Bojan Petkovski [Thanks to him] from the first answer it worked on chrome but still facing the same problem on firefox http://jsfiddle.net/jery0cdp/5/

Maybe to do something like this http://jsfiddle.net/jery0cdp/5/

$( document ).scroll(function() {    

    var doc = $(this).scrollTop() + 300;
    var elem = $("#scrollMore").offset().top;

    if (doc > elem) {
        $("#scrollMore").animate({'opacity': 1 }, 200);
    } else {
        $("#scrollMore").animate({'opacity': 0.1 }, 200);
    }
});