Sommaire Jquey

analoulou -  
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   -
Bonjour,

Je souhaite faire un sommaire dans lequel la couleur du titre du sommaire change en fonction du contenu scrollé. (Pour faire plus simple, c'est dans ce style la : http://bl-spf:82/page-contenus-2col.html

Pour l'instant j'ai juste ce code HTML, avec le sommaire et le contenu, mais je ne vois pas comment faire en jquery, j'ai essayé plusieurs tutos sans succès... Pouvez vous m'aider ?

Code html :

<html>

<head>
<meta charset="UTF-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="sommaire.js"></script>
</head>

<body>
<div id="left">

<h2 id="introduction">INTRO</h2>
<p>AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY </p>

<h2 id="contenu">CONTENU</h2>
<p>AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY </p>

<h3 id="concept">concept</h3>
<p>AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY </p>

<h3 id="application">application</h3>
<p>AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY </p>

<h3 id="demonstration">demonstration</h3>
<p>AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY </p>

<h2 id="conclusion">CONCLUSION</h2>
<p>AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY</br> AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY AZERTY </p>

</div>
<div id="right">
<!-- Sommaire -->
<ul id="sommaire">
<!-- H2 -->
<li class="toc2">
<span class="sommaireTitreNumerote numero1">1</span>
<a href="#introduction" rel="nofollow noopener noreferrer" target="_blank" class="toclink">Introduction</a>
</li>

<!-- H2 -->
<li class="toc2">
<span class="sommaireTitreNumerote numero2">2</span>
<a href="#contenu" rel="nofollow noopener noreferrer" target="_blank" class="toclink">Contenu</a>
</li>

<!-- H3 -->
<li class="toc3">
<a href="#concept" rel="nofollow noopener noreferrer" target="_blank" class="toclink">Concept</a>
</li>

<!-- H3 -->
<li class="toc3">
<a href="#application" rel="nofollow noopener noreferrer" target="_blank" class="toclink">Application</a>
</li>

<!-- H3 -->
<li class="toc3">
<a href="#demonstration" rel="nofollow noopener noreferrer" target="_blank" class="toclink">Demonstration</a>
</li>

<!-- H2 -->
<li class="toc2">
<span class="sommaireTitreNumerote numero4 current">3</span>
<a href="#conclusion" rel="nofollow noopener noreferrer" target="_blank" class="toclink">Conclusion</a>
</li>
</ul>
</div>
</body>
</html>

Merci

1 réponse

jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour,
Tu as quoi dans ton fichier sommaire.js ?
0