Непрозрачность 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 находится на 0 пикселей сверху, div B = непрозрачность 0%. И пусть он плавно затухает на всех промежуточных этапах.

Спасибо!

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

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

Спасибо!!


javascript jquery scrollbar opacity fade
person user433575    schedule 18.04.2012    source источник

Ответы (4)


arrow_upward
24
arrow_downward

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

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, тогда непрозрачность div составляет 1 - 35/35 = 0

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

person Fabrizio Calderan    schedule 18.04.2012
comment
Пробовал и не получилось, но у вас есть нужная мне концепция. Прокрутка на 35 пикселей вниз должна заставить div исчезнуть. Я создал новую скрипку, может быть, покрутишь? - person user433575; 18.04.2012

arrow_upward
7
arrow_downward 

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);: устанавливает прозрачность div

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

person scessor    schedule 18.04.2012
comment
Спасибо, он работает очень плавно, но мне нужно, чтобы он работал в пределах 35 пикселей. Пожалуйста, посмотрите мой новый пример. Цените помощь! - person user433575; 18.04.2012

arrow_upward
4
arrow_downward 

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

Демонстрация скрипта

изменить: вау, так много ответов побили меня, пока я писал

редактировать: 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

person Ghokun    schedule 18.04.2012
comment
Отличная работа, но мне нужно, чтобы она работала в пределах 35 пикселей. Пожалуйста, проверьте мой новый пример. Спасибо! - person user433575; 18.04.2012

arrow_upward

arrow_downward

person    schedule
comment
Тоже работает, но нужен предел в 35 пикселей ... пожалуйста, проверьте мой новый пример. Спасибо! - person user433575; 18.04.2012