Un indicateur de scroll pour ses articles

Placer une barre dynamique qui indique au lecteur où il en est dans sa lecture

Un premier exemple, le scroll bar de CSSTricks

On trouve sur internet de nombreux exemples, plus ou moins complexes, d’indicateur de scroll. Ceci est utile pour des blogs ou des sites affichant de longs articles, et cela rajoute au design global. Il s’agit de cette barre souvent placée au dessus ou sous le menu, qui progresse en fonction de l’action de l’internaute sur le scroll de la page

On peut relever deux exemples fonctionnels :

Un  exemple fiable, tiré du site CSSTricks : (cliquez sur le lien pour voir la page originelle)

Dans la partie html, on va créer un bloc pour notre barre de progression

<progress value="0">
  <div class="progress-container">
    <span class="progress-bar"></span>
  </div>
</progress>

On stylise le tout pour faire apparaître notre barre

.progress-container {
  width: 100%;
  background-color: transparent;
  position: fixed;
  top: 0;
  left: 0;
  height: 5px;
  display: block;
}
.progress-bar {
  background-color: red;
  width: 0%;
  display: block;
  height: inherit;
}

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

  /* Dimensions */
  width: 100%;
  height: .25em;

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

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

  /* For Firefox/IE10+ */
  background-color: transparent;

  /* For IE10+, color of the progress bar */
  color: red;
}

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

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

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

Enfin, la partie la plus importante dans cet exemple , le jquery qui va faire intéragir l’action du scroll à la progression de notre barre

$(document).ready(function() {
    
  var getMax = function(){
    return $(document).height() - $(window).height();
  }
    
  var getValue = function(){
    return $(window).scrollTop();
  }
    
  if ('max' in document.createElement('progress')) {
    // Browser supports progress element
    var progressBar = $('progress');
        
    // Set the Max attr for the first time
    progressBar.attr({ max: getMax() });

    $(document).on('scroll', function(){
      // On scroll only Value attr needs to be calculated
      progressBar.attr({ value: getValue() });
    });
      
    $(window).resize(function(){
      // On resize, both Max/Value attr needs to be calculated
      progressBar.attr({ max: getMax(), value: getValue() });
    }); 
  
  } else {

    var progressBar = $('.progress-bar'), 
        max = getMax(), 
        value, width;
        
    var getWidth = function() {
      // Calculate width in percentage
      value = getValue();            
      width = (value/max) * 100;
      width = width + '%';
      return width;
    }
        
    var setWidth = function(){
      progressBar.css({ width: getWidth() });
    }
        
    $(document).on('scroll', setWidth);
    $(window).on('resize', function(){
      // Need to reset the Max attr
      max = getMax();
      setWidth();
    });
  }
});

Différents exemples sont traités dans la page de css tricks, vous pourrez les retrouver ici.

Voici le code pen pour mieux se rendre compte de l’effet.

Un deuxième exemple plus concis

Ce deuxième exemple fait appel à moins de code, il est tiré

On part d’une simple div que l’on place de préférence dans le header. Dans une première div, on pourra placer un logo, un titre, ou sa navigation. La barre de progression vient juste après

<header>
  <div class="inner-header">
    <h1>Title
    </h1>
  </div>
  <div class="scroll-line"></div>
</header>

Un peu de css pour styliser le tout. Le header est placé en position fixed, de manière à toujours rester collé au haut de la page. Cela semble nécessaire pour que l’on puisse voir la barre de progression en action.

header{
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  background: #fff;
  border-bottom: 1px solid #ccc;
}

.scroll-line{
  height: 2px;
  margin-bottom: -2px;
  background: blue;
  width: 0%;
}

Et enfin la partie js extrêmement légère

//capture scroll any percentage
$(window).scroll(function(){
var wintop = $(window).scrollTop(), docheight = 
    
    $(document).height(), winheight = $(window).height();
 			var scrolled = (wintop/(docheight-winheight))*100;
  
  		$('.scroll-line').css('width', (scrolled + '%'));
});

Vous pourrez retrouver cet exemple ici et un autre exemple n’utilisant que le css dans cette page

Voici le « pen » original de cet exemple

Un dernier exemple pour la route

Enfin, on peut trouver un autre exemple très bien fait aussi sur cette page. On peut récupérer le code en cliquant sur le bouton « back to demo » en haut de page.

 

Mis à jour le Par Copier coller | Dans jQuery