Discussion :

[arnlig3550]

Bonjour,

Je viens vers vous suite à un problème de code ...

J'ai actuellement un site créé sous Wordpress. Sur quelques pages du site, j'aimerai ajouter une flèche gauche sur la partie gauche de l'écran et une flèche droite, sur la partie droite de l'écran.
Ces flèches serviraient pour naviguer d'une section à une autre sans repasser à chaque fois par le menu du site.

J'ai donc créé mes boutons gauche et droite sur mes pages dont la div à pour CSS "position: fixed;" de façon à voir tout le temps les boutons sous les yeuc.
Et c'est là que je rencontre un soucis. J'aimerais que lors du scroll vers le bas, mon bouton s'arrête à 50px du bottom d'une div qui se trouve plus bas dans la page.

J'ai compris que le seul moyen était de passer par du JS, j'ai donc trouvé le code ci-dessous sur internet, mais il est apparemment adapté pour que la div en position fixed, s'arrête par rapport au top du footer, dans mon cas il faudrait qu'elle s'arrête par rapport au bottom d'une div. Donc il y a surement des modifs à faire mais j'ai du mal à voir quoi

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
var offset = $("#cart_block").offset();
		var topPadding = 20;
		$(window).scroll(function() {
		    if ($(window).scrollTop() > offset.top && $(window).scrollTop() < $('#footer').offset().top-150) { 
			$("#cart_block").stop().animate({
			    marginTop: $(window).scrollTop() - offset.top + topPadding
			});
		    } else {
			$("#cart_block").stop().animate({
			    marginTop: 0
			});
		    };
		});

Peut-on m'aider s'il vous plait ?

Merci !

[Toufik83]

bonjour,

peut-on voir ton code html?

est ce que tu es obliger d'utiliser position:fixed en Css ? regarde un peu ICI, je l'ai fais sans position:fixed et je ne comprends pas pourquoi tu veux le faire.
dis moi si j'ai raté quelques choses...

[arnlig3550]

Bonjour et merci pour votre aide !

Etant sous Wordpress, je n'ai pas de fichier HTML "pur", c'est Wordpress qui le génère. Donc au pire je peux vous donner "le code source de la page" mais je pense qu'avec JSFiddle ça devrait aller.

Sinon pour la position fixed, non je ne suis pas obliger de l'utiliser si une autre méthode est mieux, c'est juste que la position fixed était pour moi, au vu de ma connaissance, la seule méthode.

J'ai donc regardé votre lien. J'ai modifié un peu le code HTML dont voici le lien pour se rapprocher un peu plus de ce que je recherche. En fait j'ai juste modifier l'emplacement de la cible, elle se trouve entre le 3ème et le 4ème élément, donc je voudrais que les flèches de navigation s'arrête à ce niveau là même si on continue de scroller plus bas, donc faut modifier le JS mais là ce n'est plus dans mes compétences .

Autre détail, au lieu que les flèches soit centrée sur la hauteur de l'écran, j'aimerais qu'elles soient plutôt à une distance définie du haut de l'écran, par exemple "top:500px;", est-ce possible ?

Merci

[Toufik83]

pour que les boutons de navigation s'arrêtent exactement a notre div cible, voilà le code ICI

en ce qui concerne la fixation des boutons a 500px du Top, n'oublie pas que lorsque tu redimensionne ton navigateur, les dimensions seront changés, alors que si tu met top:500px, le Css gardera cette valeur même si tu as redimensionné ton navigateur, ce qui va te provoquer une déformation de ta page.

je te conseil d'utiliser les pourcentages dans ce cas.

[arnlig3550]

Merci pour ce code !

Je vais essayer de le mettre en oeuvre dans Wordpress et je vous tiens au courant

[arnlig3550]

Bon, les nouvelles ne sont pas bonnes ...

Je n'arrive pas à faire fonctionner la position absolute sur les flèches, il doit y avoir quelque chose qui bloque dans mon thème Wordpress mais je vois pas quoi ... Quand j'inspecte la page, c'est bien marqué "position: absolute" mais les flèches restes là où je les aies mises, elles ne montent pas à 50%. Par contre la position fixed fonctionne ! Donc est-il possible de revoir le code avec la position fixed ?