Vue event listener realize the navigation bar ceiling effect (after the page to scroll)

Vue event listener realize the navigation bar ceiling effect (after the page to scroll)

 

Howie126313  concern

2017.11.19 15:05 *  Words 100  Read 3154 Comments 0 likes 0

He said ceiling effect is not until page sliding effect of the navigation bar as shown below:

 

When slide up the page, the navigation bar is always fixed at the top of the page.

 

Specific code:

Write event listener, listening scroll bar.

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

Then writing in the methods of watchScroll method.

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

After the addition of modified form in the corresponding Tags

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

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

END~~