Прозрачность Div, основанная на позиции полосы прокрутки

Найдите пример исчезновения div, когда полоса прокрутки достигнет определенной позиции здесь. Но это не гладкая дроссельная заслонка. Вот код из этого jsfiddle:

var divs = $('.social, .title');
$(window).scroll(function(){
   if($(window).scrollTop()<10){
         divs.fadeIn("fast");
   } else {
         divs.fadeOut("fast");
   }
});​

Я хочу, чтобы процент непрозрачности отражал позицию полосы прокрутки. Например, когда полоса прокрутки находится в очень высоком положении, непрозрачность div составляет 100%. Когда я прокручиваю вниз на 35 пикселей, я хочу, чтобы непрозрачность div уменьшалась до 0%

Возможно, метод может быть, когда div A находится на высоте 35 пикселей сверху, div B = 100% непрозрачность. Когда div A - 0px сверху, div B = 0% непрозрачность. И пусть он плавно исчезает на всех этапах между ними.

Спасибо!

ОБНОВЛЕНИЕ: Спасибо за всю помощь, большая часть из которых работает достаточно хорошо, но мне действительно нужно, чтобы она работала в диапазоне 35 пикселей. Таким образом, я создал новый пример, который будет очень ясно, как он должен работать.
http://jsfiddle.net/J8XaX/1/

ОБНОВЛЕНИЕ 2: мобильные устройства: я пробовал это на своем iPhone, и затухание не работает плавно. Как это работает, если вы скользят на полпути и отпустите палец, тогда непрозрачность снижается. Но если вы попытаетесь прокручивать гладко, он переходит от 100% непрозрачности непосредственно к непрозрачности 0%. Хотите узнать, есть ли способ исправить это?

Спасибо!!

Ответы

Ответ 1

попробуйте что-то вроде

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) });
   }
});

когда scrolltop достигает 35px, тогда непрозрачность divs 1 - 35/35 = 0

Пример скрипта: http://jsfiddle.net/wSkmL/1/
ваша скрипка обновлена: http://jsfiddle.net/J8XaX/2/ (я изменил 35 до 130 пикселей, чтобы добиться эффекта, который вы написали в оранжевом div)

Ответ 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(): область прокрутки
$(document).scrollTop(): текущая позиция прокрутки
percent: текущая позиция прокрутки в процентах divs.css('opacity', 1 - percent);: устанавливает непрозрачность divs

Также см. этот пример.

Ответ 3

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

Скриншот демо

edit: wow так много ответов избили меня, когда я публиковал

edit: 2

    var divs = $('.fademe');
$(document).ready(function(){divs.css('opacity', 0);}); //can be done using CSS also
$(window).scroll(function(){

    var percent = $(document).scrollTop() / (35);
    divs.css('opacity', percent);       
});​

Обновлен JsFiddle

Ответ 4

var divs = $('.social, .title'); 
$(window).scroll(function(){
    var p = $(window).scrollTop()/ $(window).height();
    divs.stop().fadeTo("fast",p);
});