Afficher / masquer un font awesome

Version imprimable

Bonjour,
J'ai un font-awesome qui apparaît/disparaît via javascript sur un axe horizontal, mais voilà : ci-je mets un

Code:

overflow-y: hidden

, celui-ci n'apparaît plus.
Voici mes CSS :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
html
{
	height: 100%;
	margin-top: 0px;
	margin-left: 0px;
	padding-right: 0px;
	overflow-x: visible;
	overflow-y: hidden;
}
#scrollUp {
	position: fixed;
	bottom : 10px;
	right: -100px;
	opacity: 1;
	z-index:;-index: 99;}

Mon HTML :

Code:

1
2
3
4
<div class="container">
	<div id="scrollUp">
		<a href="#slider"><i class="fa fa-arrow-circle-up fa-2x"></i></a>
	</div>

et mon jquery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
            jQuery(function(){
                $(function () {
                    $(window).scroll(function () {
                        if ($(this).scrollTop() > 200 ) { 
                            $('#scrollUp').css('right','10px');
                        } else { 
                            $('#scrollUp').removeAttr( 'style' );
                        }
 
                    });
                });
            });

Est-il possible d'afficher/masquer "scrollUp" sans déplacement ?
Merci et bonne journée,
ED

04/10/2023, 22h21
el_debutanti

Bonsoir,
Je suis tombé sur ce codepen :
https://codepen.io/matthewcain/pen/ZepbeR

Malheureusement, l'overflow: hidden dans les CSS HTML empêche toujours l'apparition du button.
Que puis-je faire ?
Merci,
ED
05/10/2023, 09h45
NoSmoking
Bonjour,

Citation:

Que puis-je faire ?

peut être revoir ta logique :mrgreen:
- d'un côté : overflow-y: hidden, donc pas de scroll vertical ;
- et de l'autre : if ($(this).scrollTop() > 200 ) test sur la position du scroll vertical !?!

Bonsoir NoSmoking :D
Il y a bien un scroll vertical :
overflow-y: hidden ne joue que sur le body (background-image) :weird:
si je ne masque pas l'overflow, l'image en mode cover dépasse en hauteur. Je ne comprends pas.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 body { font-family: 'Lato', Calibri, Arial, sans-serif; font-weight: 300; font-size: 15px; position: absolute; overflow-x: hidden; top: -55; left: 0; margin-bottom: 0 !important; right: 0; width:100%; max-height: 100% !important; background-size: cover; background-position: center;; background-overflow: hidden; background-repeat: no-repeat; background-image: url(../images/PBal1.jpg); }
Si je mets un right: 0 à la div scrollup, tout fonctionne mais le font-awesome n'est plus masqué 8O Si je retire l'overflow: hidden du HTML, tout est parfait :roll:
J'ai essayé plein de codes, jouant sur l'opacité et autres méthodes. Le fait de "masquer" l'icône en haut de site fait qu'elle n'apparaît plus nulle part au scroll. :calim2:
Bizarre bizarre :weird:
Merci et bon week-end,
ED

09/10/2023, 15h00
el_debutanti

Bonjour,
C'est bien ce code <video autoplay loop muted="" playsinline=""> qui fait que rien ne va (overflow, nav...) :weird:
J'en avais déjà parlé ici : Un background-image qui dépasse du body ou une barre de nav non fixed

Résoudre ce problème serait résoudre tous les autres, et il y en a beaucoup (positions, overflow...).
Merci beaucoup.
Bonne fin de week-end :?
ED