Div opacity based on scrollbar position

Solution 1:

try something like

var divs = $('.social, .title'),
    limit = 35;  /* scrolltop value when opacity should be 0 */

$(window).on('scroll', function() {
   var st = $(this).scrollTop();

   /* avoid unnecessary call to jQuery function */
   if (st <= limit) {
      divs.css({ 'opacity' : (1 - st/limit) });
   }
});

when scrolltop reaches 35px then opacity of divs is 1 - 35/35 = 0

example fiddle: http://jsfiddle.net/wSkmL/1/
your fiddle updated: http://jsfiddle.net/J8XaX/2/ (I've changed 35 to 130px to achieve the effect you wrote in the orange div)

Solution 2:

var divs = $('.social, .title');
$(window).scroll(function(){
   var percent = $(document).scrollTop() / ($(document).height() - $(window).height());
   divs.css('opacity', 1 - percent);
});

$(document).height() - $(window).height(): the scrolling area
$(document).scrollTop(): the current scroll position
percent: the current scroll position in percent
divs.css('opacity', 1 - percent);: sets the opacity of the divs

Also see this example.