Maison > interface Web > js tutoriel > 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

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

小云云
Libérer: 2018-05-10 16:48:57
original
9203 Les gens l'ont consulté

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)
},
Copier après la connexion

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

handleScroll () {
 var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
 console.log(scrollTop)
},
Copier après la connexion

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
 }
},
Copier après la connexion

É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;
 }
}
Copier après la connexion

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>
Copier après la connexion

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(&#39;scroll&#39;, this.handleScroll)
},
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal