Explication détaillée de la façon dont vue écoute les événements de défilement et affiche un élément en haut ou à une position fixe

Cet article présente principalement en détail comment Vue implémente l'affichage au plafond ou à position fixe de certains éléments et surveille les événements de défilement. Il a une certaine valeur de référence. J'espère qu'il pourra vous aider.

J'ai récemment écrit un projet d'application Web VUE, qui doit obtenir l'effet plafond d'une certaine partie. Autrement dit, lorsque la page glisse vers le haut et atteint cette partie, cette partie est fixe et affichée en haut.

1. Écoutez les événements de défilement
Utilisez VUE pour écrire un scrollTop qui imprime le scrollTop actuel sur la console
Tout d'abord, ajoutez un scroll à la fenêtre. dans le hook monté. Écoutez l'événement,

mounted () {
 window.addEventListener('scroll', this.handleScroll)
},

Puis dans la méthode, ajoutez cette méthode handleScroll

handleScroll () {
 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
 console.log(scrollTop)
},

La console imprime le résultat :

2. Surveillez la distance entre l'élément et le haut et déterminez si la distance de défilement est supérieure à la distance entre l'élément et le haut, définissez searchBar sur true, sinon ce sera faux

handleScroll () {
 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
 var offsetTop = document.querySelector('#searchBar').offsetTop
 if (scrollTop > offsetTop) {
 this.searchBarFixed = true
 } else {
 this.searchBarFixed = false
 }
},

Écrivez d'abord un style qui fixe l'élément en haut, isFixed (moins d'écriture)

.searchBar{
 .isFixed{
 position:fixed;
 background-color:#Fff;
 top:0;
 z-index:999;
 }
 ul {
 WIDTH:100%;
 height: 40px;
 line-height: 40px;
 display: flex;
 li {
  font-size: 0.8rem;
  text-align: center;
  flex: 1;
  i {
  font-size: 0.9rem;
  padding-left: 5px;
  color: #ccc;
  }
 }
 border-bottom: 1px solid #ddd;
 }
}

Ensuite, liez la classe de l'élément qui doit être corrigé à searchBar Si searchBar est. vrai, appliquez ce style isFixed

<p class="searchBar" id="searchBar">
 <ul :class="searchBarFixed == true ? &#39;isFixed&#39; :&#39;&#39;">
 <li>区域<i class="iconfont icon-jiantouxia"></i></li>
 <li>价格<i class="iconfont icon-jiantouxia"></i></li>
 <li>房型<i class="iconfont icon-jiantouxia"></i></li>
 <li>更多<i class="iconfont icon-jiantouxia"></i></li>
 </ul>
</p>

pour le corriger Le résultat final :

Notez que si vous quittez la page, vous devez supprimer ceci événement surveillé, sinon une erreur sera signalée.

destroyed () {
 window.removeEventListener('scroll', this.handleScroll)
},

Recommandations associées :

Exemple de partage sur la façon d'implémenter l'opération de plafond de la barre de navigation avec JavaScript

js mise en œuvre de l'effet de plafond de navigation

Problèmes lors de la mise en œuvre du plafond d'onglets à l'aide de React.js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!