Sujet Précédent Sujet Suivant

Sommaire Jquey

Fermé
analoulou - 13 oct. 2016 à 11:31
jordane45 Messages postés 38372 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 janvier 2025 - 13 oct. 2016 à 12:52
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 38372 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 9 janvier 2025 4 722
13 oct. 2016 à 12:52
Bonjour,
Tu as quoi dans ton fichier sommaire.js ?
0

Discussions similaires

sommaire d'un fichier
lakshmi66 -
lakshmi66 -

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

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

20 réponses
Afficher le plan dans chaque diapositive
Momo34 -
Raymond PENTIER -

2 réponses
A quoi correspond cette icone avec un + ?
_Ritchi_ -
_Ritchi_ -

5 réponses