Où ajouter un script qui agit sur l'action de défilement?

J'essaie de faire un div seulement après une certaine longueur de défilement. Il y a déjà quelques discussions ici sur Stackoverflow à ce sujet et j'ai donc essayé d'utiliser les scripts suggérés dans les réponses, mais aucun d'entre eux ne semble fonctionner. Donc, je suppose que je ne sais pas comment les utiliser.Où ajouter un script qui agit sur l'action de défilement?

J'ai mis ce bloc dans le head, entouré par les deux script tags:

function scroll_bar() { 
    if (document.body.scrollTop > 700) { 
     document.getElementById("navigation_bar").show(); 
    } 
    else 
    { 
     document.getElementById("navigation_bar").hide(); 
    } 
}

Et dans le body, j'ai un div (celui que je veux rendre visible/cachée) avec ces attributs:

<div onload="scroll_bar();" class="container" id="navigation_bar" style="position: fixed; z-index: 1; background-color: white; height: 50px; width: 100%;"></div>

Quel est le problème ici? (J'utilise Bootstrap de toute façon, cette classe « conteneur » vient de lui.)

Source

2017-10-12 Antonio

Avec « il semble ne pas fonctionner » Je veux dire qu'il ne réagit pas dans un sens à la fonction, il est comme il n » t existe. – Antonio

Enlever Position: fixe et vérifier –

Non, je veux le faire fixer en haut (c'est en haut, sur l'index z 1) pendant le défilement ... – Antonio

Au lieu de mettre votre <script> dans votre <head>, mettre en avant votre balise de corps de fermeture (</body>). Cela permettra de s'assurer que le contenu est chargé avant le script et donc votre script devrait fonctionner correctement.

<p>I'm some content!</p> 

    <script>console.log('JavaScript!');</script> 

</body>

, vous devez également vous assurer que vos feux de fonction de script sur the body scroll event.

Source

2017-10-12 11:24:34

Vous devez ajouter un écouteur d'événement à la « défilement » événement: window.addEventListener('scroll', scroll_bar). Aussi dans votre gestionnaire j'utiliserais window.pageYOffset instead de document.body.scrollTop.

Source

2017-10-12 11:25:16 justadudewhohacks

Uhm où exaclty dois-je ajouter l'auditeur? – Antonio

Résolu. :) Je l'ai mis dans les attributs du corps, comme ... onscroll = "window.addEventListener ('scroll', scroll_bar) – Antonio

Êtes-vous sûr que c'est bon?

document.getElementById("navigation_bar").show();

"document.getElementById (" navigation_bar ")." est javascript.

"show()" est jquery.

essayer:

document.getElementById("navigation_bar").style.display = 'block'/'none'

$("#navigation_bar").show();

Source

2017-10-12 11:26:55 LuckyLue

Oh merci beaucoup je ne savais pas cela.Jquery est inclus de toute façon car j'utilise Bootstrap et il est là par défaut ... – Antonio

Vous avez égaré votre événement div.

s'il vous plaît déplacer votre événement BODY

Code

<body onload="scroll_bar();" > 
<div class="container" id="navigation_bar" style="position: fixed; z-index: 1; background-color: white; height: 50px; width: 100%;"></div> 
</body>

Source

2017-10-12 12:23:36

Où ajouter un script qui agit sur l'action de défilement?

Répondre

Questions connexes