2017-09-11 17 views
0

J'ai une Div sur ma page. Et quand cela arrive en haut de la page, il devrait sortir un fichier console.log. C'est mon code jusqu'à présent mais ça ne marche pas pour moi. Aucune suggestion? Merci et Désolé pour mon mauvais anglais.Comment se connecter quand une div atteint le haut de la page

var distance = $('.img').offset().top; 
    $window = $(window); 

$window.scroll(function() { 
    if ($window.scrollTop() >= distance) { 
     console.log("Div is now at the top of the site!") 
    } 
}); 

Et voici ma partie HTML:

<div class="img"> 
     <img src="city.jpg"> 
     </div> 
+0

Votre code fonctionne .... https://jsfiddle.net/okct6z6p/ – Stuart

+0

Il travaille. Quel est le problème ici? – xxxmatko

+0

Je reçois toujours cette erreur dans Chrome: "script.js: 1 Uncaught TypeError: Impossible de lire la propriété 'top' de undefined at script.js: 1 (anonyme) @ script.js: 1" –

Répondre

1

Vous pouvez utiliser getBoundingClientRect() pour obtenir la position d'un élément par rapport à la fenêtre. Voir l'exemple que j'ai ajouté. Il consigne le nombre de pixels de la div depuis le haut de la fenêtre lorsque vous faites défiler le document. Lorsque vous travaillez sur le défilement, c'est toujours une bonne idée de rebondir le travail que vous voulez faire. Voir ici pour plus d'informations: https://davidwalsh.name/javascript-debounce-function

const 
 
    contentDiv = document.getElementById('content-div'); 
 
    
 
function onScrollHandler(event) { 
 
    console.log(`Pixels from top: ${contentDiv.getBoundingClientRect().top}`); 
 
} 
 

 
window.addEventListener('scroll', onScrollHandler);
.vertical-space { 
 
    height: 200vh; 
 
} 
 

 
.content-div { 
 
    background-color: #333; 
 
    color: #fff; 
 
}
<div class="vertical-space"></div> 
 
<div id="content-div" class="vertical-space content-div">Now you see me</div>

+0

Je reçois toujours cette erreur: script.js: 14 TypeError Uncaught: Impossible de lire la propriété 'getBoundingClientRect' de null à onScrollHandler (script.js: 14) onScrollHandler @ script.js: 14 –

+0

Voulez-vous dire dans ma réponse ou fait vous copiez et collez la réponse dans votre propre code? – Thijs

+0

Même lorsque je copie votre code un à un, il me donne toujours cette erreur. –