Плавное изменение прозрачности при прокрутке

#jquery #css3 #javascript #opacity #веб_программирование

Сделал для сайта кнопку "наверх", и хочу что бы она плавно появлялась при прокрутке
страницы вниз (как в ВК), но что бы её прозрачность зависела он расстояния прокрутки.
Получился такой код:



var h = window.outerHeight,
    t = window.innerHeight,
    r = 0;
$(window).scroll(function() {
  r = $(window).scrollTop() - t;
  if (r > getDocumentHeight() - 200) {
    $('#ToTop').css({
      opacity: 1
    });
    $('#ToTop').css({
      display: 'block'
    });
  }
  if (r > 0) {
    var op = r / 1000;
    $('#ToTop').css({
      opacity: op
    });
    $('#ToTop').css({
      display: 'block'
    });
  } else $('#ToTop').css({
    display: 'none'
  });
});




Но проблема в том, что цифры прозрачности в CSS то меняются, а вот сама кнопка изменяется
только при остановке прокрутки страницы.
На пример кнопка "Вверх" в вк меняет прозрачность именно в процессе прокрутки.
Подскажите как такое можно реализовать.
    

Ответы

Ответ 1

var wnd = $(window),
    opacityControl = $('div');

wnd.scroll(function(){
    var top = wnd.scrollTop(),
        opacity = top > 500 ? 1 : top * 2 / 1000;
   
    opacityControl.css('opacity', opacity);
});
div{
    opacity:0;
    height:1500px;
    background:#333;
}


    opacity block