11540 sujets

JavaScript, DOM et API Web HTML5

Problème pour réaliser un menu flottant selon la scrollbar

Bonjour,
Cherchant à réaliser un menu dynamique, c'est à dire dans un premier temps à son emplacement initial dans le thème et ensuite, lorsqu'il est censé disparaître de la page, il reste accroché au top de ma page, j'ai donc cherché un moyen de réaliser cela. J'ai donc trouvé une méthode qui me semblait assez facile (celle ci : http://desgeeksetdeslettres.com/programmation-java/menu-fixe-mais-flottant-selon-la-scrollbar-js-css).

Seulement, il ne se passe rien lorsque je fais défiler la page. Pourtant, j'ai bien respecter le tutoriel, tous le CSS et le JS ont été mis en place, le script étant chargé dans mon fichier functions.php (je suis sous Wordpress) et bien signalé comme étant chargé dans le devtool de Chrome. Voici à quoi ressemble mes fichiers :

Le script chargé à travers le functions.php :
<?php function theme_js(){
 
wp_enqueue_script( 'menu',
get_template_directory_uri() . '/js/menu.js',
array() );

 
}
 
add_action( 'wp_footer', 'theme_js' ); ?>


Le menu.js qui permet de dynamiser la barre :


// listen for scroll
var positionElementInPage = $('#top').offset().top;
$(window).scroll(
    function() {
        if ($(window).scrollTop() &gt;= positionElementInPage) {
            // fixed
            $('#top').addClass("floatable");
        } else {
            // relative
            $('#top').removeClass("floatable");
        }
    }
);


Et enfin mon css, dans un temps ma barre en position relative puis fixed :


#top {
  width: 960px;
  height: 40px;
  position: relative;
  z-index: 999999999;
  float: left;
  margin-top: 10px;
  text-align: center;
  background-color: #FFDBA7;
}

#top.floatable {
  position: fixed;
}


Les propriétés CSS n'ont pas l'air d'entraver le fonctionnement du script, je ne vois donc pas où ce trouve le problème j'ai l'impression d'avoir bien procédé mais le Javascript reste en général assez énigmatique pour moi .. Smiley decu
Bref, si vous avez une idée ou quelque chose que j'aurais oublié, pourriez vous m'en faire part? Merci d'avance !

PS: Désolé de ne pas fournir le lien de mon site, je travaille en local.
Modifié par thefactory (02 Jul 2014 - 11:32)
Bonjour,

JavaScript n'est pas désactivé dans ton navigateur / le cache est vidé (suite aux modifs) ?
L'appel à JQuery est ok également (théoriquement avec Wordpress il devrait)?
Tu as une page de test en ligne ?
Salut,

Coup d’œil rapide...
Comme il te l'a été précisé sur tes autres sujets, le mélange des librairies mais également l'appel et l'utilisation de différentes versions n'est pas fait pour te faciliter la tâche Smiley ohwell
Des erreurs dans ton code HTML qu'il conviendrait de corriger.
Enfin il me semble que dans le script en question tu as une erreur :
// listen for scroll
var positionElementInPage = $('#top').offset().top;
$(window).scroll(
    function() {
        if ($(window).scrollTop() &gt;= positionElementInPage) {
            // fixed
            $('#top').addClass("floatable");
        } else {
            // relative
            $('#top').removeClass("floatable");
        }
    }
);

au lieu de :
// listen for scroll
		var positionElementInPage = $('#top').offset().top;
		$(window).scroll(
			function() {
				if ($(window).scrollTop() >= positionElementInPage) {
					// fixed
					$('#top').addClass("floatable");
				} else {
					// relative
					$('#top').removeClass("floatable");
				}
			}
		);

Encodage de ">"

Corriges les erreurs, testes la légère modification du script JavaScript.
Modifié par 6l20 (03 Jul 2014 - 19:11)
Merci de votre réponse,

J'ai corrigé l'erreur dû à l'encodage mais ça ne fonctionne toujours pas. Du coup, je me penche sur la piste des différentes versions de Jquery et j'aurais besoin de votre aide.

D'une part, il y a certaines choses que je ne comprend pas, si j'ai bien compris de base Wordpress propose dans ma version la version Jquery 1.8.3 (celle qui se trouvent dans les includes, dans ma version locale). Ensuite, une autre version est en effet chargé, la 1.4.2, celle-ci étant introduite dans le thème et donc jamais mise à jour. Dois-je passer à une version supérieure ou supprimer cet appel dans le header? Car je ne sais pas du tout à quoi ça correspond, je n'utilise pas les widgets et sliders qui sont de bases proposés dans le thème.

Je ne sais pas si j'ai vraiment compris, j'essaie d'interpréter au mieux ce que le devtool me dit. De plus, est ce que le conflit pourrait venir d'une extension tierce sollicitant du Jquery? Enfin, les plugins de Wordpress utilisent chacun indépendamment une version de Jquery ou utilise la version qui est fourni par Wordpress?

Désolé pour toutes les questions supplémentaires, je ne connais pas vraiment ce domaine donc j'essaie d'éclaircir un maximum le problème, ayant commencé ce site assez jeune et donc pas très expérimenté j'ai été assez négligeant quant à l'utilisation des plugins sollicitant Jquery, Java etc ...

Merci pour les éléments de réponses en tout cas!
Salut, j'ai voulu faire plus ou moins la même chose que toi et j'ai réussi à faire quelque chose sans jQuery...
Voilà les codes (à prendre avec des pincettes hein...)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Mon petit bazar</title>
		<link rel="stylesheet" type="text/css" href="styles/style.css" />
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    </head>

    <body>
		
		<div id="titre_site">
			<!-- mettre une image-->
			<p>
				Mon petit bazar
			</p>
		</div>
		
		<div id="titre_page">
			<!-- mettre une image-->
			<p>
				Accueil
			</p>
		</div>
		
		
		<ul class="rubriques" id="menu_site">
			<li><a href="coups_de_coeur.html"> Coups de coeur </a> </li>
			<li><a href="mes_projets.html"> Mes projets </a></li>
			<li><a href="moi.html"> Qui suis-je ? </a></li>
			<li id="actif">Accueil</li>
		</ul>
		
		<div id="menu_page">
			<ul class="items">
				<li><a href="coups_de_coeur.html"> Coups de coeur </a> </li>
				<li><a href="mes_projets.html"> Mes projets </a></li>
				<li><a href="moi.html"> Qui suis-je ? </a></li>
			</ul>
			<ul class="items" >
				<li> <a href="index.html"> Haut de la page</a></li>
				<li> <a href="#ancre_1">Ancre 1</a></li>
				<li> <a href="#ancre_2">Ancre 2</a></li>
				<li> <a href="#ancre_2">Ancre 2</a></li>
				<li> <a href="#ancre_2">Ancre 2</a></li>
				<li> <a href="#ancre_2">Ancre 2</a></li>
				<li> <a href="#ancre_2">Ancre 2</a></li>
				<li> <a href="#ancre_2">Ancre 2</a></li>
			</ul>
			<br />
			<p id="plus">
				contact : <a href="mailto:monpetitbazar@outlook.fr">monpetitbazar@outlook.fr </a> 
			</p>
		</div>
		
		<div id="contenu">
			<h1 id="ancre_1"> Un titre</h1>
			<p>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
				Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
				Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			</p>
			
			<h1 id="ancre_2">Un autre titre</h1>
				<p>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
				Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
				Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			<br/>
			Du blabla pour l'instant mais ça va se concrétiser.
			</p>
		</div>
		<script src="menu_page.js"></script>
    </body>
</html>


body 
{
	margin : 5% 5% 5% 5%;
	font-family : verdana, arial, sans-serif;
	font-size : 12px;
	width : 90%;
}

#titre_site
{
	background-color : #99CFFB;
	padding : 0%;
	margin : 0%;
	border-bottom : 1px dotted;
}

#titre_site p
{
	color : #AA0000;
	font-size : 300%;
	font-style : italic;
	text-align : center;
	padding : 1%;
	margin:0%;
}

#titre_page
{
	background-color : #99CFFB;
	padding : 0%;
	margin:0%;
	
}

#titre_page p
{
	font-size : 200%;
	font-style : italic;
	text-align : right;
	padding : 1%;
	padding-right: 15%;
	margin:0%;
}	

#menu_site
{
	background-color : #FFC6AA;
	overflow-y: auto;
	margin : 0%;
	padding : 0%;
}

.rubriques
{
	list-style-type: none;
	margin : 0%;
	padding : 0.5%;
	padding-right : 5%;
	font-size : 110%;
}

.rubriques li
{
	float : right;
	border : 1px dotted black;
	padding : 1%;
	margin-left : 0.2%;
}

.rubriques a:hover
{
	color : black;
	background-color : #99CFFB;
}

.rubriques a 
{
	display: block;
	color: black;
	text-decoration: none;
}

.rubriques #actif 
{
	background-color: #99CFFB;
}

#menu_page
{
	float : left;
	background-color : #FFC6AA;
	width : 15%;
	position : fixed;
	top: 231px;
	bottom : 10px;
	margin : 0%;
	padding : 0%;
	overflow : auto;
}

#contenu
{
	margin-left : 20%;
}


.items
{
	border : 1px solid #FFECB7;
	border-radius : 40%;
	width : 90%;
	overflow-y : hidden;
	background-color : #FFD3C1;
	padding : 0%;
	margin-bottom : 7%;
	margin-left: auto;
	margin-right: auto;
}

.items a
{
	color : black;
	display: block;
	text-decoration : none;
}

.items li
{
	list-style : none;
	line-height : 200%;
	text-align : center;
	padding-right : 5%;
	padding-left : 5%;
	margin : 0%;
}


/*fonction qui gère la rétrocompatibilité*/
function addEvent(element,event,func,bool)
{
	bool=bool||true;
	element.addEventListener? element.addEventListener(event,func,bool):element.attachEvent('on'+event,func);/*P.A.N./F.O.B.*/
}

var menu=document.getElementById("menu_page");

function adapter()
{
	var decalage=window.pageYOffset;
	if(221>decalage)
	{
		menu.style.top=231-decalage+"px";
	}
	else
	{
		menu.style.top="10px";
	}
}
addEvent(window,"scroll",adapter);
/*addEvent(window,"resize",adapter);*/


Par contre ça ne fonctionne pas avec les zooms... Peut-être est-ce dû à mon css par contre...

PS Désolée s'il y a multiple postes, j'ai quelques soucis de connexion
Oula merci, mais je ne comprend pas trop ! Smiley smile
Qu'est ce qui correspond à ton slider et la fonction nécessite quand même du Jquery non?
Mon slider ?
Non aucun jQuery, que du Javascript... Sur jsFiddle, j'ai testé ce code en cochant No library pure js et ça fonctionnait
Mon menu flottant c'est le rectangle verticale sur la gauche...
Sinon, je ne comprends pas ta question.. tu dois appliquer le js... Même si là, il est adapté à ce que j'ai voulu faire pour moi..
Bonjour,

Je ne suis pas sûr d'avoir bien compris ton problème...
Mais s'il s'agit d'avoir un menu déroulant qui reste toujours visible en haut de page alors tu n'as pas besoin de javascript, avec css3 c'est parfaitement faisable.

En quelques mots, il suffit de placer tes sous-menus hors du champ de vision et de les rappeler avec la pseudo class :hover.
#menu li ul /* Sous-listes */
{ 
	position: absolute; /* Position absolue */
	left: -999em; /* loin du champ de vision */

#menu li:hover ul, #menu li li:hover ul, #menu li.sfhover ul, #menu li li.sfhover ul  /* Sous-listes lorsque la souris passe sur un élément de liste ET sous-sous-lites lorsque la souris passe sur un élément de sous-liste */
{
	left: auto; /* Repositionnement normal */
	min-height: 0; /* Corrige un bug */
}


Enfin pour qu'il reste toujours visible en haut de page, c'est 
#menu, #menu ul /* Liste */
{
position: fixed;
}

Personnellement, ça me semble plus pratique et plus facile que par des scripts, surtout que certains scripts peuvent être gênés à l’exécution par certains navigateurs...

Si cela ne correspond pas à ton besoin, tu peux simplement ignorer ce post, je ne saurais pas t'aider en js... Je m'y mets seulement !
Modifié par sL4sh (23 Jul 2014 - 11:48)
Désolé du temps de réponse j'ai eu quelques petits contretemps Smiley smile
Je vais m'y pencher de plus près, à vrai dire je ne pensais que c'était réalisable via CSS. Je regarde donc ça et je vous tiens au courant !
Sujet clos
Aller à