28112 sujets

CSS et mise en forme, CSS3

Effet sticky ne fonctionne pas sur tous navigateurs et supports

Bonjour à tous,

j’ai mis en ligne récemment mon site internet :
www.lucie-bodin.fr

J’y ai créé un menu déroulant avec position « sticky » : il doit rester collé en haut de la droite de la fenêtre quand on scrolle vers le bas de la page. (Sur la page d’accueil, sa position initiale est plus basse que sur les autres pages car il est après le menu principal).


Voici son code html :

<ul class="navfix">
    			<li><a href="index.html#publicite"><img src="images/boutonsmenu/flech-prec.png" 
												onMouseOver="this.src='images/boutonsmenu/flech-prec-blanc.png'" 
												onMouseOut="this.src='images/boutonsmenu/flech-prec.png'"
												alt="ACCUEIL PUBLICITÉ" /></a></li>
				<li><a href="29givenchy.html"><img src="images/boutonsmenu/flech-suiv.png" 
												onMouseOver="this.src='images/boutonsmenu/flech-suiv-blanc.png'" 
												onMouseOut="this.src='images/boutonsmenu/flech-suiv.png'"
												alt="GIVENCHY" /></a></li>	
				<li><a href="#"><img src="images/boutonsmenu/menu.png" 
							onMouseOver="this.src='images/boutonsmenu/menu-blanc.png'" 
							onMouseOut="this.src='images/boutonsmenu/menu.png'"
							alt="MENU"/></a>
					<ul class="cache">
						<li><a href="index.html#editorial"><img src="images/boutonsmenu/editorial.png" 
												onMouseOver="this.src='images/boutonsmenu/editorial-blanc.png'" 
												onMouseOut="this.src='images/boutonsmenu/editorial.png'"
												alt="ÉDITORIAL" /></a></li>
						<li><a href="index.html#publicite"><img src="images/boutonsmenu/publicite.png" 
												onMouseOver="this.src='images/boutonsmenu/publicite-blanc.png'" 
												onMouseOut="this.src='images/boutonsmenu/publicite.png'"
												alt="PUBLICITÉ" /></a></li>
						<li><a href="index.html#evenementiel"><img src="images/boutonsmenu/evenementiel.png" 
												onMouseOver="this.src='images/boutonsmenu/evenementiel-blanc.png'" 
												onMouseOut="this.src='images/boutonsmenu/evenementiel.png'"
												alt="ÉVÈNEMENTIEL" /></a></li>
						<li><a href="index.html#web"><img src="images/boutonsmenu/web.png" 
												onMouseOver="this.src='images/boutonsmenu/web-blanc.png'" 
												onMouseOut="this.src='images/boutonsmenu/web.png'"
												alt="WEB" /></a></li>
						<li><a href="index.html#divers"><img src="images/boutonsmenu/divers.png" 
												onMouseOver="this.src='images/boutonsmenu/divers-blanc.png'" 
												onMouseOut="this.src='images/boutonsmenu/divers.png'"
												alt="DIVERS" /></a></li>		
					</ul>
				</li>


Voici le css créant la position sticky :
.navfix{
	    width:60px;
	    height:60px;
        float:right;
        position: sticky;
        -o-position: sticky;
        -moz-position: sticky;
        -webkit-position: sticky;
        -ms-position: sticky;
        -khtml-position: sticky;
        top: 0;
        background-color: rgb(192,192,226);/* fond violet clair */
}

Le problème est que la position sticky ne prend pas effet sur Safari ni Opéra, malgré l’écriture des préfixes -o- et -webkit-, que ce soit sur i-mac comme sur i-pad ou i-phone ! L’effet sticky fonctionne sur Chrome sur i-mac et sur PC portable, mais pas sur Chrome sur i-pad !

Dois-je rajouter un code pour que mon effet sticky fonctionne n’importe où ?

Merci de vos réponses !
Bonjour,
j'avais engagé une discussion sur "sticky" et "fixed" ici, il y a deux semaines. J'ai finalement adopté "fixed", qui fait juste ce que je demandais, maintenir le menu en place au moment du scroll. Il semble que "sticky" n'est pas reconnu par certains navigateurs:
https://caniuse.com/css-sticky = 16.84% + 70.07% = 86.91%
https://caniuse.com/css-fixed = 93.5% + 0.06% = 93.56%
Chez moi :
.nav{
	position: -webkit-fixed; /* Safari */
	position: fixed;
	top: 0;
	right:0;
	left:0;
        opacity:1;
	color:white;
	z-index:9000;
	}

fonctionne sur iPad mini.
Une solution plus performante avait été proposée en JavaScript.
Cordialement.
Bonsoir,

@parsimonhi : avec les préfixes devant sticky, le problème est résolu, sauf sur Opéra, et sauf sur Internet Explorer.

@bongota : quand je remplace "sticky" par "fixed", la position initiale de mon menu est la même qu'au moment du scroll. Or, ce n'est pas ce que je souhaite !

Pour le moment, j'opte pour les préfixes devant "sticky". Ça résout une bonne partie du problème !

Merci de vos réponses !
Bonjour,
un lien (en Anglais), qui explique bien la différence entre "fixed" et "sticky".
https://keithclark.co.uk/articles/fixed-content-with-position-sticky/
Et je retrouve ça, dans mes fichiers :
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 25%;
    background-color: #f1f1f1;
    height: 100%; /* Full height */
    position: fixed; /* Make it stick, even on scroll */
    overflow: auto; /* Enable scrolling if the sidenav has too much content */
}

Je ne sais pas ce que ça vaut, je n'ai pas testé. Lors de mes parcours de forums, j'enregistre des petits bouts de code, qui pourraient me servir un jour, sans les expérimenter.
Re-bonjour,

Merci pour le lien, Bongota, je vais le lire… avec un traducteur !

je suis sur une piste de solution intéressante, trouvée sur un autre forum, en utilisant la position « fixed » et du code JS.

Dans ma page html, j’ai ajouté à mon ul une 2e classe nommée « fixed », puis intégré ce code en JS :

<script>window.addEventListener("scroll", function() {
    if(this.scrollY >788) {
        document.querySelector('ul.navfix').classList.add('fixed');
    } else {
        document.querySelector('ul.navfix').classList.remove('fixed');
    }
}, false);</script>


En gros je demande à mon menu de rester fixé en haut de la fenêtre dès qu’il est à plus de 788px du haut de la page.

Dans mon CSS, j’ai écrit ceci :

.navfix.fixed{
	width:60px;
	height:60px;
	float:right;
	position: fixed;
	top:0;
	background-color: rgb(192,192,226);/* fond violet clair */
}


Cette fois ça marche sur tous les navigateurs Smiley biggrin mais le problème est que mon menu est fixé à gauche du body alors que je le veux à droite !

J’ai signalé ce problème avant-hier sur l’autre forum mais depuis, pas de réponse.

Quelqu’un ici aurait une solution ?
Sujet clos
Aller à