Bonjour et merci de ta réponse.
Effectivement le " position: sticky; " n'est pas encore optimal, je vais éviter pour l'instant.
Ne connaissant pas vraiment bien le JS je me suis lancé sur plusieurs tuto', relativement bien expliqué.
Cependant j'ai beaucoup de mal avec le calcul du scroll, j'ai donc tenté de contourner le problème en utilisant quelque chose qui dit : " Avant le scroll de mon élément le texte est caché et dès que tu scroll dessus tu fais apparaître le texte, et quand tu remonte au niveau de l'élément tu cache à nouveau le texte "
Jusqu'à là pas de problème, un peu de galère mais j'arrive à effectuer cela.
Cependant, comme dit précédemment je dispose de " plusieurs " éléments qui scroll, et ce que j'ai réussi à appliquer ne s'applique que pour le scroll d'un seul élément, je ne sais pas comment faire pour que ça fonctionne avec chaque élément !
Bon plutôt que de blablater, je vais vous mettre mes bouts de codes qui vous éclaireront peut-être mieux
<div class="topbar">
Logo
</div>
<div class="menu" data-sticky>
<a href="#">Item 1</a>
<a href="#">Item 2</a>
<a href="#">Item 3</a>
<a href="#">Item 4</a>
<a href="#">Item 5</a>
</div>
<div class="test retest">
<p>Grosse quantité de texte que j'ai volontairement supprimé pour + de visibilité</p>
</div>
<div class="menuu" data-sticky>
<a href="#">Menu 1</a>
<a href="#">Menu 2</a>
<a href="#">Menu 3</a>
<a href="#">Menu 4</a>
<a href="#">Menu 5</a>
</div>
<div class="test bloc">
<p>Grosse quantité de texte que j'ai volontairement supprimé pour + de visibilité</p>
</div>
<div class="menuuu" data-sticky>
<a href="#">Menu 1</a>
<a href="#">Menu 2</a>
<a href="#">Menu 3</a>
<a href="#">Menu 4</a>
<a href="#">Menu 5</a>
</div>
<div class="test">
<p>Grosse quantité de texte que j'ai volontairement supprimé pour + de visibilité</p>
</div>
.menu
{
border: 1px solid black;
background-color: red;
}
.menuu
{
border: 1px solid black;
background-color: black;
}
.menuuu
{
border: 1px solid black;
background-color: yellow;
}
.topbar
{
font-size: 28px;
text-align: center;
margin-bottom: 50px;
}
.fixed
{
position: fixed;
top: 0;
}
.image
{
text-align: center;
}
.test
{
display: none;
}
.bloc
{
display: none;
}
(function(){
var scrollY = function () {
var supportPageOffset = window.pageXOffset !== undefined;
var isCSS1Compat = ((document.compatMode || "") === "CSS1Compat");
return supportPageOffset ? window.pageYOffset : isCSS1Compat ? document.documentElement.scrollTop : document.body.scrollTop;
}
var elements = document.querySelectorAll('[data-sticky]')
for (var i = 0; i < elements.length; i++) {
(function(element) {
/* Lorsque l'on scrool
Si le menu sors de l'écran
Alors il deviendra fixe
*/
// Variables
var rect = element.getBoundingClientRect()
var top = rect.top + scrollY()
var fake = document.createElement('div')
fake.style.width = rect.width + "px"
fake.style.height = rect.height + "px"
// Fonctions
var onScroll = function () {
var hasScrollClass = element.classList.contains('fixed')
if (scrollY() > top && !hasScrollClass) {
element.classList.add('fixed')
$(".retest").fadeIn(); /* affiche le texte caché */
element.style.width = rect.width + "px"
element.parentNode.insertBefore(fake, element)
}
else if (scrollY() < top && hasScrollClass) {
element.classList.remove('fixed')
$(".retest").fadeOut(); /* remasque le texte */
element.parentNode.removeChild(fake)
}
}
var onResize = function () {
element.style.width = "auto"
element.classList.remove('fixed')
fake.style.display = "none"
rect = element.getBoundingClientRect()
top = rect.top + scrollY()
fake.style.width = rect.width + "px"
fake.style.height = rect.height + "px"
fake.style.display = "block"
onScroll()
}
// Listener, évébements sur toute la fenêtre
window.addEventListener('scroll', onScroll)
window.addEventListener('resize', onResize)
})(elements[i])
}
})()
J'en suis donc actuellement à là et ma class " retest " ( correspondante au 1er bloc de texte dans mon 1er élément qui est un menu ) apparaît bien et disparaît bien lors du scroll du menu.
Cependant pour mes autres éléments rien ne se passe quand j'ajoute des lignes de codes similaires en modifiant le nom de la class.
Je n'ai pas de logique en JS j'imagine que l'erreur est toute bête mais bon
