Detaillierte Erklärung, wie Vue auf Scroll-Ereignisse lauscht und ein Element oben oder an einer festen Position anzeigt

Dieser Artikel stellt hauptsächlich detailliert vor, wie Vue die Anzeige bestimmter Elemente an der Obergrenze oder der festen Position implementiert und einen gewissen Referenzwert hat.

Ich habe kürzlich ein VUE-Web-App-Projekt geschrieben, das den Deckeneffekt eines bestimmten Teils erzielen muss. Das heißt, wenn die Seite nach oben gleitet und diesen Teil erreicht, wird dieser Teil fixiert und oben angezeigt.

1. Auf Scroll-Ereignisse achten
Verwenden Sie VUE, um einen ScrollTop zu schreiben, der den aktuellen ScrollTop auf der Konsole ausgibt.
Fügen Sie zunächst einen Scroll zum Fenster hinzu im montierten Hook. Hören Sie sich das Ereignis an,

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

Dann fügen Sie in der Methode diese handleScroll-Methode hinzu

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

Die Konsole gibt das Ergebnis aus:

2. Überwachen Sie den Abstand vom Element nach oben und stellen Sie fest, ob der Bildlaufabstand größer ist als der Abstand vom Element nach oben. Setzen Sie searchBar auf true, andernfalls ist es false

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
 }
},

Schreiben Sie zuerst einen Stil, der das Element oben fixiert, isFixed (weniger Schreiben)

.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;
 }
}

Binden Sie dann die Klasse des Elements, das fixiert werden muss, an searchBar wahr, wenden Sie diesen isFixed-Stil

<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>

an, um ihn zu beheben. Das Endergebnis:

Beachten Sie, dass Sie diesen entfernen müssen, wenn Sie die Seite verlassen überwachtes Ereignis, andernfalls wird ein Fehler gemeldet.

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

Verwandte Empfehlungen:

Beispielfreigabe zur Implementierung der Deckenbedienung der Navigationsleiste mit JavaScript

js Implementierung des Effekts der Navigationsobergrenze

Probleme bei der Implementierung der Tab-Obergrenze mit „react.js“

Das obige ist der detaillierte Inhalt vonDetaillierte Erklärung, wie Vue auf Scroll-Ereignisse lauscht und ein Element oben oder an einer festen Position anzeigt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!