JSFiddle - React, Tailwind, and code Playground

by DupontTD

HTML

<!DOCTYPE html>

<body>

  <article class="markdown-body">
  <header>
  	<h1>aray from</h1>
  </header>
		<p>L'article « Array.from » n'existe pas sur ce wiki ! 
Vous souhaitez le créer ? Vérifiez auparavant que le sujet n'a pas déjà été traité dans les résultats ci-dessous, puis assurez-vous qu'il est admissible dans l'encyclopédie.
Pour créer « Array.from », suivez le guide !
</p>
		<h1>MapReduce</h1>
<p>		MapReduce est un patron d'architecture de développement informatique, inventé par Google1, dans lequel sont effectués des calculs parallèles, et souvent distribués, de données potentiellement très volumineuses, typiquement supérieures en taille à 1 téraoctet.
<H1>map</H1>
	<p>
Les termes « map » et « reduce », et les concepts sous-jacents, sont empruntés aux langages de programmation fonctionnelle utilisés pour leur construction (map et réduction de la programmation fonctionnelle et des langages de programmation tableau).
<H1>modéle</H1><p>
MapReduce permet de manipuler de grandes quantités de données en les distribuant dans un cluster de machines pour être traitées. Ce modèle connaît un vif succès auprès de sociétés possédant d'importants centres de traitement de données telles Amazon.com ou Facebook.<p> Il commence aussi à être utilisé au sein du Cloud computing. De nombreux frameworks ont vu le jour afin d'implémenter le MapReduce. Le plus connu est Hadoop qui a été développé par Apache Software Foundation.<p> Mais ce framework possède des inconvénients qui réduisent considérablement ses performances notamment en milieu hétérogène. <p>Des frameworks permettant d'améliorer les performances <p>de Hadoop ou les performances globales du MapReduce, tant en termes de vitesse de traitement qu'en consommation électrique, commencent à voir le jour.




  </article>

  <footer>

  </footer>
  <div class="current-section">
    <p class="name"></p>
    <a href="#top">&uarr;</a>

  </div>

</body>

CSS

.current-section {
    background: none repeat scroll 0 0 #222222;
    color:white;
    position: fixed;
    top: 0;
    visibility: hidden;
    width : 100%;
	  display : flex;
	  align-items  : center;
    padding: 10px;
}

.show{
	 visibility: visible;
	 opacity : 0.6;
}


.current-section * {
	margin : auto;
	color : white;
}

p{
	width : 10vw;
}

JavaScript

let headings = Array.from(document.querySelectorAll('article h1'), function(el) {
  return {
    "pos": el.getBoundingClientRect().top,
    "text": el.textContent
  }
});



window.addEventListener("scroll",function(){
	  if (window.pageYOffset <= headings[0].pos) {
      document.querySelector(".current-section").classList.remove("show");
    } else {

      document.querySelector(".current-section").classList.add("show");

      for (let {pos, text} of headings) {
        if (window.pageYOffset >= pos) {
          document.querySelector(".current-section .name").textContent = text;
        } else {
          break;
        }
			}
		}},false);