Ajout d'une class à un élément

Version imprimable

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:

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:

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

26/06/2017, 08h53
SpaceFrog
Code:

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

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

et le css pour la bordure :
Code:

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; }
26/06/2017, 13h59
Midnight17

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

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 ? :roll:

Bonjour,
concernant l'approche :

Code:

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

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:

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

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)

27/06/2017, 20h14
NoSmoking

Citation:

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

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

Citation:

/* 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 !

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:

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:

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');
        }
    });
});

28/06/2017, 19h56
NoSmoking

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.
28/06/2017, 20h49
Midnight17

.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 ?
29/06/2017, 08h22
SpaceFrog

Citation:

.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 ??? :koi:

Quand tu vas chez ton garagiste tu lui dis:
" Bonjour ma voiture est en panne, mais je suis venu avec celle de mon voisin ... " :roll:
29/06/2017, 13h50
Midnight17

Elle est bien présente en CSS, et écrite dans mon 1er message, elle a pas changé depuis :roll:
29/06/2017, 14h02
SpaceFrog

Tu nous a montré ton code html ?

Du bootstrap classique

Code:

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>

02/07/2017, 09h33
NoSmoking

Citation:

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 ?
02/07/2017, 11h02
Midnight17

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 :P
Ou peut-être que ça impacte au niveau du rechargement de la page ?

Citation:

... , à moins que je me trompe :P

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

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

02/07/2017, 20h16
Midnight17

1 pièce(s) jointe(s)

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

Pièce jointe 290826
05/07/2017, 18h25
NoSmoking

Oui et alors tu en conclues quoi !??!
05/07/2017, 21h53
Midnight17

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 :)