Discussion :

[Midnight17]

Bonjour,

Pour un projet que j'ai je souhaiterais ajouter une class aux éléments de ma barre de navigation mais étant plutôt novice en JS j'ai un peu de mal...

L'objectif au fait c'est d'arrondir les angles de mes liens seulement si à leur survol leur scrollTop = 0 (Si >= 1 l'arrondi ne doit pas être appliqué)

Je vous joins mon code, je pense qu'il est vraiment pas beau à voir, je suis un peu parti dans tous les sens, mais bon

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready(function()
{
	$(window).scroll(function()
	{	
		$('nav').mouseenter(function()
		{
			if($(this).scrollTop() = 0)
			{
				$('.navbar a').addClass('navRadius');
 
				$('nav').mouseleave(function()
				{
					$('.navbar a').removeClass('navRadius');
				});
			}
			else
			{
				$('.navbar a').removeClass('navRadius');
			}
		});
	});
});

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.navRadius
{
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

[SpaceFrog]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

if($(this).scrollTop() = 0)

l'opérateur de comparaison en javacsript est ==

et le css pour la bordure :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
.navRadius {
  border-radius: 0px 0px 5px 5px;
-moz-border-radius: 0px 0px 5px 5px;
-webkit-border-radius: 0px 0px 5px 5px;
}

[Midnight17]

Effectivement erreur bête qui m'avait échappé, merci

Par contre mon code ne marche toujours pas, j'ai essayé de le remanier un peu mais bon, sans succès, je me suis dirigé vers la bonne voie déjà ou c'est pas du tout ça ?

[NoSmoking]

Bonjour,
concernant l'approche :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
$('nav').on('mouseenter' ,function () {
  // test et action
});
$('nav').on('mouseleave' ,function () {
  // test et action
});

[Midnight17]

Je ne comprend pas d'où vient mon erreur...

mon JS ne veut pas appliquer le radius alors qu'en CSS en utilisant la même classe ça fonctionne :/

Alors ne parlons même pas du fait de le retirer ensuite si scrollTop >= 1

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
 
/* Ce code fonctionne */
.navbar a:before
{
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
/* Celui-ci non */
$(document).ready(function()
{
	$('nav').mouseenter(function()
	{
		$('.navbar a:before').addClass('navRadius');
	});
 
	$('nav').mouseleave(function()
	{
		$('.navbar a:before').removeClass('navRadius');
	});
});

(sans le :before l'effet ne marche pas non plus avec le CSS car j'ai déjà plusieurs choses sur ce menu)

[NoSmoking]

$('.navbar a:before').addClass('navRadius');

• tu l'as défini où/comment en CSS cette class ?

/* Ce code fonctionne */
.navbar a:before
{
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}

• j'ai du mal à voir comment ce code fonctionne !