Faire apparaitre une div quand je scroll vers le bas

Pour un nouveau site, je recherche un script : quand je scroll, faire apparaître une div (depuis sur la gauche ou la droite), quand un mot apparait dans le texte.

Par exemple, quand je scroll et que je rencontre un mot avec l'ancre #word1, que s'affiche en slidant la div #def-word1, qui contiendrait le complément d'info de ce mot, depuis la gauche ou la droite. Et que cette div s'affiche au même niveau que le mot

Je joins une image pour expliquer ce que je dit

Et un début de code (peut-être)

p {
  font-family: 'Open Sans', serif;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

a {
  color: red;
  text-decoration: none;
}

#def-word1,
#def-word2 {
  background: rgba(0, 0, 0, 0.15);
  font-style: italic;
  width: 25%;
  margin-bottom: 2px;
  display: block;
  text-decoration: none;
}

#def-word2 {
  float: left
}

#def-word1 {
  float: right
}

<p>bla bla bla bla <a href="#word1">word 1</a> bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p>

<p>bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla <a href="#word2">word 2</a> bla bla bla bla</p>

<div id="def-word1">here is the definition of the word 1</div>

<div id="def-word2">here is the definition of the word 2</div>

Merci beaucoup !

PS : je viens de trouver un site qui fait ca, pour exemple : https://lesjours.fr/obsessions/start-up/ep1-incubateurs/
Modifié par camilleCS (23 Jan 2018 - 16:22)

Deux solutions :

1 ) passer par une lib javascript

2 ) utiliser mon code sans lib via jquery :

        $.fn.isOnScreen = function(){
            
            var win = $(window);
            
            var viewport = {
                top : win.scrollTop(),
                left : win.scrollLeft()
            };
            viewport.right = viewport.left + win.width();
            viewport.bottom = viewport.top + win.height();
            
            var bounds = this.offset();
            bounds.right = bounds.left + this.outerWidth();
            bounds.bottom = bounds.top + this.outerHeight();
            
            return (!(viewport.right < bounds.left || viewport.left > bounds.right || viewport.bottom < bounds.top || viewport.top > bounds.bottom));
            
        };

je peux donc tester si ma div est visible lors du scroll avec .isOnScreen() qui me renverra "true"

Merci de ta réponse,

Je ne vois pas trop comment utiliser ton code …
j'ai commencé un JSFiddle ici
jsfiddle.net/6ct47jcu/

ou indiquer dans le code quel div faire apparaitre à quel moment ?

PS : comme tu l'auras vu, je suis débutant …
Modifié par camilleCS (23 Jan 2018 - 17:02)

Le code c'est du jquery, donc à insérer dans un document.ready (je te laisse chercher dans sur internet comment utilisé du jquery) donc sur ton jsfiddle cela ne marche pas car tu n'a pas importer le jquery dans les options de l'outil
Modifié par JENCAL (24 Jan 2018 - 13:34)