뷰 이벤트 리스너가 탐색 모음 천장 효과를 실현 (페이지 스크롤 후)

뷰 이벤트 리스너가 탐색 모음 천장 효과를 실현 (페이지 스크롤 후)

 

Howie126313  우려

2017년 11월 19일 15시 5분 *  단어 100  읽으 3,154 댓글 0 좋아요 0

그는 다음과 같이 천장 효과는 네비게이션 바의 효과를 슬라이딩 페이지까지없는 말했다 :

 

페이지를 슬라이드 할 때, 탐색 모음은 항상 페이지의 상단에 고정되어 있습니다.

 

특정 코드 :

스크롤 막대를 듣고, 이벤트 리스너를 작성합니다.

mounted () {
      // 事件监听滚动条
      window.addEventListener('scroll', this.watchScroll)
    }

이어서 watchScroll 방법의 방법에 기록.

methods: {
      watchScroll () {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
        // 当滚动超过 50 时，实现吸顶效果 if (scrollTop > 49) { this.navBarFixed = true } else { this.navBarFixed = false } } } 

해당 태그 수정 된 형태의 첨가 후

<div :class="navBarFixed == true ? 'navBarWrap' :''">

.navBarWrap {
    position:fixed;
    top:0;
    z-index:999; } 

END ~~