11521 sujets

JavaScript, DOM et API Web HTML5

[Besoin d'aide] Fonctionnalités sur navbar - jQuery

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é ! Smiley ohwell

Merci d'avance à toutes personnes qui prendra un peu de temps pour me venir en aide

Je vous joins des bouts de code :


<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>]




/* 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);
}




$(document).ready(function()
{
    $(window).scroll(function()
    {
        if ($(this).scrollTop() >= 1)
        {
            $('.navbar').addClass("active");
        }
        else
        {
            $('.navbar').removeClass("active");
        }
    });
});
hello Smiley smile

Pour la 2ème partie, je suis pas sûr....

Par contre pour la 1ère partie, le retrait du background qui ne se fait pas en douceur, je pense qu'il faut mettre la transition sur l'élément html (nav) et non dans une class.
Merci de ta réponse Allan Smiley smile J'ai réussi à régler le problème de la transition manquante en ajoutant la nav dans la partie .active du CSS et en retouchant mon else de la même façon !

Pour mon dernier problème du rechargement de la page est-ce que quelqu'un aurait une petite idée de comment s'y prendre pour solutionner le problème svp ? Smiley confus
Montre le code JS.

Peut-être que tu peux ajouter une condition du genre:


$(document).ready(function()
{
    if($(window).scrollTop() > 0){
            $('.navbar').addClass("active");
    }
else{
      $(window).scroll(function()
     {
        if ($(this).scrollTop() >= 1)
        {
            $('.navbar').addClass("active");
        }
        else
        {
            $('.navbar').removeClass("active");
        }
   }
    });
});


Je suis pas sûr du code mais en gros au chargement de la page on check le scrollTop. Si on a scrollé, donc supérieur à 0, on ajoute la classe, sinon lors du scroll on ajoute la classe. A tester...
Bonjour,

Eh bien oui, le 1er problème c'était normal, le fond qui ne se retire pas en douceur, ta transition était sur la classe active, donc en retirant la classe, tu retires la transition CQFD.
Donc il suffit de mettre la transition sur la classe .navbar

Et le 2ème, comme l'a précisé allan00958, il suffit de lancer ton test au chargement de la page...
Oui c'est bon pour le rechargement j'ai trouvé une solution, bon la transition est aussi présente à ce moment la mais au moins ça fonctionne Smiley sweatdrop 


$(document).ready(function()
{
	navbar_onscroll();

	function navbar_onscroll()
	{
		if ($(this).scrollTop() >= 1)
		{
			$('.navbar').addClass('active'); 
		}
		else
		{
			$('nav').removeClass('active'); 
		}
	}

	$(window).scroll(function()
	{	
		navbar_onscroll();
	});
});
Sujet clos
Aller à