11521 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Faire apparaitre disparaitre une div lors du scroll!???

Bonjour a tous,
Voila j'ai un portfolio et je voudrais que une div disparraisse lorsque je scroll avec la souris et quel ré-apparaisse lorsque je ne scroll mais le problémes et que je n'arrive pas a la faire réapparaitre lorsqi=ue je ne scroll plus voici ou j'en suis pour l'instant :

<nav id='reveal' class='topBar'><h1 id='textBar'>portfolio</h1></nav>



 .topbar {
            position: fixed;
            background-color: red;
            padding: 0;
            margin: 0;
            height: 5rem;
            width: 100%;
            top: 0em;
        }
        
        .topbar-nav {
            display: flex;
            flex-direction: row;
        }
        
        #textbar {
            margin-left: 5rem;
            text-align: center;
        }
   



var reveal = document.getElementById('reveal');

document.body.addEventListener('wheel', function(e) {
    console.log(e);
    if (event = 'wheel') {
        reveal.style.display = 'none';
    } else {
        reveal.style.display = 'block';
    }

})
Bonjour,
Une solution consisterait, au moment du scroll, à lancer une fonction setTimeout qui affiche la div avec par exemple une seconde de retard, cette fonction étant annulée si on continue de scroller.

var reveal = document.getElementById('reveal');
cptt = setTimeout(function(){ reveal.style.display = 'block';},1000)
document.body.addEventListener('wheel', function(e) {
    console.log(e);
    if (event = 'wheel') {
      clearTimeout(cptt)  
     reveal.style.display = 'none';
    cptt = setTimeout(function(){ reveal.style.display = 'block';},1000)
    } 
})


Une autre méthode consisterait à faire la même chose en CSS, avec l'attribut : {transition:visibility 1000ms; }
Modérateur
Et l'eau,

Regarde ceci

Au passage, le code dans ton if, est faux.
Modifié par niuxe (20 May 2020 - 01:11)
Impeccable, merci j'avais penser a mettre un setTimeOut justement mais je n'avais jamais reussi a bien le mettre pour qu'il fonctionne.Là les 2 solutions fonctionne je ne sais pas encore laquelle je vais mettre mais je vous remercie pour vos retour vous m'avais sorti une grosse épine du pieds!!!
Smiley biggrin
Et Niuxe c cool car ta réponse ma fais apprendre plein de nouveau trucs tel que : arguments , callback...
et le tout de ta réponse fais réfléchir a changer ma façon de résoudre des problémes.
D'ailleur Jlon aussi ,tu m'as fais apprendre un truc, je ne savais pas que le pouvais mettre une fonction dans une variable.
Thank!!!
je débute vraiment Smiley lol
Tchaooo
Modérateur
Ymer62 a écrit :
Et Niuxe c cool car ta réponse ma fais apprendre plein de nouveau trucs tel que : arguments , callback...
et le tout de ta réponse fais réfléchir a changer ma façon de résoudre des problémes.
D'ailleur Jlon aussi ,tu m'as fais apprendre un truc, je ne savais pas que le pouvais mettre une fonction dans une variable.
Thank!!!
je débute vraiment Smiley lol
Tchaooo


Heureux que j'ai pu t'aider. Bien sûr que tu peux déclarer une fonction à partir d'une variable (en JS) . On appelle ça déclarer une fonction en littérale. Un des gros avantage, tu passes la références et non l'appelle proprement dit ! C'est ce que l'on appelle une injection de dépendance.
Modifié par niuxe (22 May 2020 - 15:50)
Sujet clos
Aller à