javascriptjqueryopacityscrolltop

Content fade based on scroll position

I have the below function set in place to fade out/in certain content based on its proximity to the top/bottom of the page. The desired effect is pretty visible and obvious if you click on the ABOUT link on the top, but if you use the WORK button to scroll down the content just pops in at the right position but the fading does not occur as it does with the top.

I'm sure it has something to do with the scrollBottom equivalent I've created but not sure how to go about fixing this

 $(window).load(function(){
        $(window).scroll(function() {
        var st = $(window).scrollTop();
        var sb = $(document).height() - $(window).height() - $(window).scrollTop();
        $('#about .content').css({'opacity' : (1 - st/450)});
        $('#work .content').css({'opacity' : (450 + sb*-1)});
        
        $('#home .content').css({'opacity' : (-(450 + sb*-1))});
        $('#home .content').css({'opacity' : (-(1 - st/450))});
        });
    });
Solution

  • In my browser, your page loaded with a document height of 2892 and a window height of 952. Plugging those dimensions into your equations gives the opacity of #work varying from -1478 to 450. This has it starting to display when the window is 450px from the bottom, fully fading in when the window is 451px from the bottom - probably a little faster than you intended.

    If you change the work line to

    $('#work .content').css({'opacity' : ((450 + sb*-1)/450)});

    then your opacity will vary from -3.28 to 1, crossing 0 and starting to fade in when the window has scrolled to 450px from the bottom, reaching 1.00 (100% fade in) when the window has scrolled all the way down.