この記事では主に、Vue の特定の要素の天井または固定位置表示とスクロール イベントの監視について詳しく紹介します。興味のある方は参考にしていただければ幸いです。
私は最近、特定の部分の天井効果を達成する必要がある VUE Web アプリ プロジェクトを作成しました。つまり、ページが上にスライドしてこの部分に到達すると、この部分が固定されて上部に表示されます。
1. スクロール イベントをリッスンします
VUE を使用して、現在のスクロールトップをコンソールに出力するスクロールトップを作成します。まず、マウントされたフックのウィンドウにスクロール リッスン イベントを追加します。
mounted () { window.addEventListener('scroll', this.handleScroll) },
handleScroll () { var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop console.log(scrollTop) },
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 } },
.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; } }
destroyed () { window.removeEventListener('scroll', this.handleScroll) },
jsを使用してナビゲーションの天井効果を実現するためのナビゲーションバーの天井操作を実装する方法に関する例の共有
以上がvue がスクロール イベントをリッスンし、要素を上部または固定位置に表示する方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
