Sommaire Jquey

analoulou -  
jordane45 Messages postés 40050 Statut Modérateur -
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

Réponse 1 / 1
jordane45 Messages postés 40050 Statut Modérateur 4 757
 
Bonjour,
Tu as quoi dans ton fichier sommaire.js ?
0

Discussions similaires

Intégrer une table des annexes et des matières sur word
clairon69 -
Jo -

20 réponses
Sommaire + Table des matières + Table des Annexes
Ilona.L -
gbo -

2 réponses
WOrd 365 Liste des figures et annexes
Tartealacreme_8509 -
Tartealacreme_8509 -

2 réponses
sommaire d'un fichier
lakshmi66 -
lakshmi66 -

4 réponses
Est-il possible de créer un sommaire en markdown
Labna -
bruno -

3 réponses