11521 sujets

JavaScript, DOM et API Web HTML5

Cacher contenu quand bas de page / pb double scroll

Hello !
Je suis en train de faire un site divisé en deux parties scrollable verticales avec un long menu déroulant sur la partie gauche qui affiche sur la partie droite les articles. Les articles sont show/hide avec un système simple d'ancres.

ANCRES : 
#1 {display:none;}
#1:target{display:block;}

<a href="#1">titre</a>
<div id="1" class="page"> contenu</div>


CE QUI DEFINI PARTIE DROITE :
.background{
position: fixed;
top: 0;
left: 50%;
width: 50%;
height: 100%;
background-color:  #EAECEE;
overflow:scroll
}

Je voudrais qu'une fois que l'article partie droite est arrivé en bas de page, il se cache à nouveau, j'ai donc un petit javascript :

HIDE ARTICLE
document.onscroll = function() {
    if (window.innerHeight + window.scrollY > document.body.clientHeight) {
        document.getElementById('N_fixedBottom').style.display='none';
    }
}

<div id="N_fixedBottom">contenu à supprimer en bas de page</div>


>> le truck c'est que quand on termine l'article sur la partie droite il ne disparait pas, pour le faire disparaitre il faut arrive en bas de page du menu en partie gauche. Je n'arrive pas à identifier le bas de page comme étant celui de droite...


Merci pour vos idées !!
Modifié par onmouseclick (28 Jun 2019 - 09:53)
Hello Jencal, merci pour ta réponse ! En fait je truck c'est que j'arrive à le faire (je me suis servie aussi hehe) mais je n'arrive pas à indiquer sur lequel des deux scrolls la fonction doit s'appliquer, et pour le coup je ne trouve pas d'exemples qui se rapproche de ma situation... Smiley fou
salut,

avec le code que tu as, tu es juste en train d'exécuter une action lorsqu'on arrive en fin de page.
Pour savoir si on a atteint la fin d'un élément, tu dois faire le calcul en fonction de la position et de la taille de cet élément en utilisant par exemple getBoundingClientRect.
Tu peux voir un exemple.
Sujet clos
Aller à