VUE implementation fixed location display function

  • 的头像-Tumi
  • 36 day agopublish

In the Vue project, it is true.

For example, the function we want to implement is that the navigation bar is fixed after the page is down to a certain location.

First: To listen to the ‘scroll’ event in the MOUNTED lifecycle, after the event is triggered, execute a function that handles scrolling.

  window.addEventListener ( 'scroll', this.handleScroll) methods: {handleScroll () {var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document .body.scrollTop var offsetTop = document.querySelector ( '# searchBar'). offsetTop if (scrollTop> offsetTop) {// determines whether reached the top this.searchBarFixed = true} else {this.searchBarFixed = false}}}  
The intact source code is as follows:

// Binding style
.NAV {Height: 250px;}. Content {HEIGHT: 1900PX; } ul {width: 100%; Height: 40px; line-height: 40px; Display: flex; li {list-style: none; font-size: 0.8Rem; Text-align: center; flex: 1; i {font -size: 0.9REM; Padding-Left: 5px; color: #ccc;}} border-bottom: 1px solid #ddd;}}
Summary The above is the VUE that Xiaobian introduces the fixed location display function. I hope that everyone can help. If you have any questions, please leave a message, the small package will reply to everyone. Thank you very much for your support of Tumi Cloud Website!
If you think this article helps you, welcome to reprint, please indicate the source, thank you!
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment