Fonctionnalités sur Navbar
Bonjour,
Je suis un novice en JS/jQuery et lors de l'animation de ma navbar j'ai rencontré un petit problème qu'après de longues heures de try hard et au final une incompréhension je viens vers vous demander un peu d'aide.
Voici ma problématique :
J'ai créer une navbar totalement fonctionnelle ( Faite avec Bootstrap même si ça ne devrait pas influencer sur quoi que ce soit concernant mon problème)
Je souhaiterais que cette navbar soit sans background lors du chargement de la page, mais que dès que je commence à scroll elle prenne un background AVEC TRANSITION (Ca c'est bon cette partie de mon code fonctionne !)
Et que lorsque qu'on revienne en topPage à scrollTop =1 ce background se retire. (Cette partie fonctionne également MAIS la transition du retrait n'est pas appliqué je ne comprend pas pourquoi...)
Et enfin un dernier point, j'ai beau avoir cherché pendant des heures sur des forums ou des sites rien de ce que j'ai trouvé n'a su m'éclairer :
J'aimerais que lorsque je recharge ma page, le background reste actif sur la nav si j'ai déjà commencé à scroll auparavant (actuellement il se retire et je dois recommencer à scroll pour qu'il se ré-affiche)
Entre ceux qui parlent de tels ou tels fonctions, d'Ajax que je ne maîtrise pas vraiment ou encore ceux qui disent que ce n'est tout bonnement pas possible je suis assez perplexe et un peu paumé ! :/
Merci d'avance à toutes personnes qui prendra un peu de temps pour me venir en aide
Je vous joins des bouts de code :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
| <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="#monMenu">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<span class="navbar-brand"> Define name </span>
</div>
<div id="monMenu" class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-right">
<li><a href="#"> Link1 </a></li>
<li><a href="#"> Link2 </a></li>
<li><a href="#"> Link3 </a></li>
<li><a href="#"> Link4 </a></li>
<li><a href="#"> Link5 </a></li>
</ul>
</div>
</div>
</nav> |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| /* Pour retirer le paramétrage par défaut */
.navbar
{
background-color: transparent;
border: none;
}
/* Class à ajouter en jQuery */
.active
{
-webkit-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
background-color: rgba(0, 0, 0, 0.8);
} |
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| $(document).ready(function()
{
$(window).scroll(function()
{
if ($(this).scrollTop() >= 1)
{
$('.navbar').addClass("active");
}
else
{
$('.navbar').removeClass("active");
}
});
}); |
