이 글은 주로 Vue의 특정 요소의 천장 또는 고정 위치 표시 구현과 스크롤 이벤트 모니터링에 대해 자세히 소개합니다. 관심 있는 친구들이 참고할 수 있기를 바랍니다.
저는 최근 특정 부분의 천장 효과를 달성해야 하는 VUE 웹 앱 프로젝트를 작성했습니다. 즉, 페이지가 위로 슬라이드되어 이 부분에 이르면 이 부분이 고정되어 상단에 표시됩니다.
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; } }
<p class="searchBar" id="searchBar"> <ul :class="searchBarFixed == true ? 'isFixed' :''"> <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>
destroyed () { window.removeEventListener('scroll', this.handleScroll) },
네비게이션 천장 효과를 달성하기 위해 JavaScript
js를 사용하여 탐색 모음 천장 작업을 구현하는 방법에 대한 예시 공유
위 내용은 Vue가 스크롤 이벤트를 수신하고 상단 또는 고정 위치에 요소를 표시하는 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!