6

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

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

1 ответ 1

4

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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
    opacity block
</div>

1
  • не плохо-бы было,что-бы вы сначало узнали высоту страницы а потом отняли высоту экрана,потом,прокрученое разделили-бы на на чило выше,получили-бы соотношение в процентах,которое поставили-бы в opacity
    – AseTry
    Commented 9 нояб. 2017 в 18:00

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.