Ajout d'une class à un élément

**Midnight17** · 24/06/2017, 19h16

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** · 26/06/2017, 08h53

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** · 26/06/2017, 13h59

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** · 26/06/2017, 15h07

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** · 26/06/2017, 17h45

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** · 27/06/2017, 20h14

$('.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 !

**Midnight17** · 27/06/2017, 20h34

C'est que j'ai pas mal de trucs sur le CSS de ma nav (elle est faite en bootstrap au fait si jamais)

Je met tout le code CSS des fois que ça puisse aider à y voir plus clair ^^'

Code css :

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
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.navbar, .navbar-default, .navbar-collapse { background-color: transparent; border: none; } /* Remove default parameters */
 
.navbar-default .navbar-brand, .navbar-default .navbar-brand:hover { color: white; font-size: 16px; } /* Modification to .navbar-brand */
 
.navbar-default .navbar-nav li a, .navbar-default .navbar-nav li a:hover { color: white; text-align: center; text-transform: uppercase; font-size: 14px; } /* Modification to .navbar-nav */
 
.navbar-default .navbar-nav>li>a:focus {color: white;} /* Conserves the white color after click */
 
/* ACTIVE BACKGROUND ON SCROLL */
nav, .navActive
{
	font-family: 'Merriweather', serif;
	-webkit-transition: all 0.5s ease-in; -moz-transition: all 0.5s ease-in; -ms-transition: all 0.5s ease-in; -o-transition: all 0.5s ease-in; transition: all 0.5s ease-in;
	background-color: rgba(0, 0, 0, 0.6);
}
 
.navActive { box-shadow: 0 0 15px black; }
 
/* SCROLLSPY */
.navbar-default .navbar-nav>.active>a, .navbar-default .navbar-nav>.active>a:focus, .navbar-default .navbar-nav>.active>a:hover
{
    color: white; /* Color when the scrollspy is active */
    border-bottom: 2px solid #e1e1d0;
	background: -webkit-radial-gradient(rgba(204, 204, 179, 0.3) 0%, transparent 70%);
	background: -moz-radial-gradient(rgba(204, 204, 179, 0.3) 0%, transparent 70%);
	background: -ms-radial-gradient(rgba(204, 204, 179, 0.3) 0%, transparent 70%);
	background: -o-radial-gradient(rgba(204, 204, 179, 0.3) 0%, transparent 70%);
	background: radial-gradient(rgba(204, 204, 179, 0.3) 0%, transparent 70%);
}
 
/* Animation on hover */
.navbar a:before
{
	content: "";
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background-color: rgba(255, 255, 255, 0.3);
	-webkit-transform: scaleY(0); -moz-transform: scaleY(0); -ms-transform: scaleY(0); -o-transform: scaleY(0); transform: scaleY(0);
	-webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; -ms-transform-origin: 50% 0; -o-transform-origin: 50% 0; transform-origin: 50% 0;
	-webkit-transition: 0.3s ease-out; -moz-transition: 0.3s ease-out; -ms-transition: 0.3s ease-out; -o-transition: 0.3s ease-out; transition: 0.3s ease-out;
}
 
/* Height of the selection block (Hover) */
.navbar a:hover:before { -webkit-transform: scaleY(1.04); -moz-transform: scaleY(1.04); -ms-transform: scaleY(1.04); -o-transform: scaleY(1.04); transform: scaleY(1.04); }

Et au passage j'ai retouché un peu le JS mais bon ça fonctionne toujours pas quoi que je fasse:

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
/* Avec ce code le radius s'applique mais seulement si scrollTop >= 1 ce qui n'est pas logique du tout ! */
$(document).ready(function()
{
    $(window).scroll(function()
    {  
        if ($('nav').scrollTop() == 0)
        {
            $('nav a').addClass('navRadius');
        }
        else
        {
            $('nav a').removeClass('navRadius');
        }
    });
});

**NoSmoking** · 28/06/2017, 19h56

Je ne vois toujours pas de class navRadius dans ton code CSS.

il nous manquerais aussi de code pour bien voir sur quoi tu cherches à mettre ton effet.

**Midnight17** · 28/06/2017, 20h49

.navRadius est bien présente t'en fait pas ^^ Je l'ai juste pas mise dans le code envoyé

Et sinon de quel code tu parles au juste ?

**SpaceFrog** · 29/06/2017, 08h22

.navRadius est bien présente t'en fait pas ^^ Je l'ai juste pas mise dans le code envoyé

Et tu espères que l'on puisse t'aider ???

Quand tu vas chez ton garagiste tu lui dis:
" Bonjour ma voiture est en panne, mais je suis venu avec celle de mon voisin ... "

**Midnight17** · 29/06/2017, 13h50

Elle est bien présente en CSS, et écrite dans mon 1er message, elle a pas changé depuis

**SpaceFrog** · 29/06/2017, 14h02

Tu nous a montré ton code html ?

**Midnight17** · 29/06/2017, 14h50

Du bootstrap classique

Code html :

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
23
24
25
26
27
<body data-spy="scroll" data-target=".navbar" data-offset="0">
 
	<nav class="navbar navbar-default navbar-fixed-top">
  		<div class="container">
    			<div class="navbar-header">
        			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        				<span class="sr-only">Toggle navigation</span>
			          	<span class="icon-bar"></span>
			          	<span class="icon-bar"></span>
			          	<span class="icon-bar"></span>            
      				</button>
      				<span class="navbar-brand"> CompanyName </span>
    			</div>
    			<div>
      				<div id="myNavbar" class="collapse navbar-collapse">
        				<ul class="nav navbar-nav navbar-right">
						<li><a href="#section1"> <img src="SVG/Home.svg" alt="" > </a></li>
						<li><a href="#section2"> Link1 </a></li>
						<li><a href="#section3"> Link2 </a></li>
						<li><a href="#section4"> Link3 </a></li>
						<li><a href="#section5"> Link4 </a></li>
						<li><a href="#section6"> Link5 </a></li>
					</ul>
      				</div>
    			</div>
  		</div>
	</nav>

**NoSmoking** · 02/07/2017, 09h33

if ($('nav').scrollTop() == 0)

là tu testes si ton élément <nav> est « scrollé », est ce que tu veux ou est ce que tu veux tester le scroll de ta page ?

**Midnight17** · 02/07/2017, 11h02

Heu bah en soit que je teste le scroll sur la nav ou sur la page ça change pas tant que ça les choses si ? Dans la mesure ou si c'est >= 1 pour l'un ça l'est aussi pour l'autre, à moins que je me trompe

Ou peut-être que ça impacte au niveau du rechargement de la page ?

**NoSmoking** · 02/07/2017, 19h19

... , à moins que je me trompe

Oui, ajoute ce code en fin de page et regarde la console (F12)

Code :

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

1
2
3
4
5
6
$(document).ready(function () {
  $(window).on('scroll', function () {
    console.log('body : ', $(this).scrollTop());
    console.log('nav : ', $('nav').scrollTop());
  });
});

**Midnight17** · 02/07/2017, 20h16

Effectivement ça change pas mal, la nav reste à 0

Nom : console.png
Affichages : 125
Taille : 22,9 Ko

**NoSmoking** · 05/07/2017, 18h25

Oui et alors tu en conclues quoi !??!

**Midnight17** · 05/07/2017, 21h53

J'en conclus qu'il y a un petit problème sur mon JS au niveau des éléments sélectionnés alors, vu que c'est la page qui est pris en compte et pas la nav ^^

Je vais essayer de revoir ça quand j'aurais un peu plus de temps, thx

Ajout d'une class à un élément

jQuery

Discussions similaires

Partager

Partager