Как сделать дополнительную прокрутку дублирующую вертикальную?

Question

[lumb]

Чтобы стало понятно о чем речь сайт прокрутите вниз и вверху будет горизонтальная оранжевая прокрутка, которая дублирует вертикальную. Удобная штука, особенно для мобильных. Где такое взять?

Answer 1

[Aleksey Solovyev]

Link

$(document).on('ready', function() {  
  var winHeight = $(window).height(), 
      docHeight = $(document).height(),
      progressBar = $('progress'),
      max, value;

  /* Set the max scrollable area */
  max = docHeight - winHeight;
  progressBar.attr('max', max);

  $(document).on('scroll', function(){
     value = $(window).scrollTop();
     progressBar.attr('value', value);
  });
});

progress {
  /* Positioning */
  position: fixed;
  left: 0;
  top: 0;

  /* Dimensions */
  width: 100%;
  height: 5px;

  /* Reset the appearance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;

  /* Get rid of the default border in Firefox/Opera. */
  border: none;

  /* Progress bar container for Firefox/IE10+ */
  background-color: transparent;

  /* Progress bar value for IE10+ */
  color: red;
}

progress::-webkit-progress-bar {
  background-color: transparent;
}

progress::-webkit-progress-value {
  background-color: red;
}

progress::-moz-progress-bar {
  background-color: red;
}

Все! На codepen сей код в работе
Зачем для 3+\- строчек искать плагин?

Пусть будет этот, если не хотите сами думать: https://github.com/kunukn/reading-position-indicator

Answer 2

[Сергей]

Пример индикатора прокрутки страницы (см. правый верхний угол)