Discussion :

[el_debutanti]

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

Code css :

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

overflow-y: hidden

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

Code css :

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

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 html :

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

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 :

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

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

[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

[NoSmoking]

Bonjour,

Que puis-je faire ?

peut être revoir ta logique

• 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 !?!

[el_debutanti]

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

Code css :

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

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é Si je retire l'overflow: hidden du HTML, tout est parfait
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.
Bizarre bizarre
Merci et bon week-end,
ED

[el_debutanti]

Bonjour,
C'est bien ce code <video autoplay loop muted="" playsinline=""> qui fait que rien ne va (overflow, nav...)
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