Search code examples
javascriptjqueryopacityonscroll

jQuery opacity on scroll and start on load

I've been struggling with this snippet, it does exactly what i'm looking but inverted; it goes from 1 opacity to 0 and i want it to go from 0.75 to 1.

Also as you can see on the fiddle the number appears only when you start scrolling, i want the number to appear even if theres no scrolling at all (onload). 

`http://jsfiddle.net/rrmonn/p1cjzyt9/`

Any suggestions?

Thanks!

Solution 
  • // 1px scroll or less will equiv to 1 opacity
var fadeStart  = 1,
    // 400px scroll or more will equiv to 0 opacity
    fadeUntil  = 400,
    fading     = $('#fading');

$(window).bind('scroll', function(){
    var offset = $(document).scrollTop(),
        opacity = 0.75;
    if (offset <= fadeUntil) {
        opacity = 0.75 + offset / fadeUntil;
    }
    fading.css('opacity',opacity).html(opacity);
});

fading.html(fading.css('opacity'));

    Also put .75 as default opacity on css. And learn some math.