Vue.js Nuxt/Vue/引导Vue收缩导航栏滚动

使用Nuxt学习Vue。要根据页面滚动位置更改导航栏类

查看了，但没有找到有效的解决方案

以下是我必须处理的问题：

``` default.vue
<template lang="pug">
div(v-on:scroll="shrinkNav", v-on:click="shrinkNav")
  b-navbar.text-center(toggleable="sm" type="light" sticky v-b-scrollspy)
    #myNav.mx-auto.bg-white
      b-navbar-toggle(target="nav_collapse")
      b-navbar-brand.mx-auto(href="#") 
        | Example.org
      b-collapse#nav_collapse.mx-auto(is-nav='')
        b-navbar-nav(justified, style="min-width: 600px").vertical-center
          b-nav-item.my-auto(href='#home') Home
          b-nav-item.my-auto(href='/how') How
          i.fab.fa-earlybirds.fa-2x.mt-2.mb-3
          b-nav-item.my-auto(href='/values') Values
          b-nav-item.my-auto(href='/join-us') Join Us
  #content.container(v-on:scroll="shrinkNav", v-on:click="shrinkNav")
nuxt
    nuxt
</template>

<script>
  // resize navbar on scroll
  export default {
    methods: {
      shrinkNav() {
        var nav = document.getElementById('nav')
        var content = document.getElementById('content')
        if (nav && content) {
          if(content.scrollTop >= 150) {
            nav.classList.add('shrink')
          } else {
            nav.classList.remove('shrink')
          }
        }
        console.log(document.documentElement.scrollTop || document.body.scrollTop)
      }      
    }
  }
</script>
```

``default.vue
div（v-on:scroll=“shrinkNav”，v-on:click=“shrinkNav”）
b-navbar.文本中心（togleable=“sm”type=“light”粘性v-b-scrollspy）
#myNav.mx-auto.bg-white
b-navbar-toggle（target=“导航折叠”）
b-navbar-brand.mx auto（href=“#”）
|Example.org
b-collapse#nav_collapse.mx auto（is nav=''）
b-navbar-nav（对齐，style=“最小宽度：600px”）。垂直中心
b-nav-item.my auto（href='#home'）home
b-nav-item.my auto（href='/how'）how
i、 fab.fa-earlybirds.fa-2x.mt-2.mb-3
b-nav-item.my auto（href='/values'）值
b-nav-item.my auto（href='/join-us'）加入我们
#content.container（v-on:scroll=“shrinkNav”，v-on:click=“shrinkNav”）
努克斯
努克斯
//调整滚动条上的导航栏大小
导出默认值{
方法：{
shrinkNav（）{
var nav=document.getElementById（'nav'）
var content=document.getElementById（'content'）
如果（导航和内容）{
如果（content.scrollTop>=150）{
nav.classList.add（'shrink'）
}否则{
nav.classList.remove（'shrink'）
}
}
console.log（document.documentElement.scrollTop | | document.body.scrollTop）
}      
}
}
```

---

shrinkNav

在单击时运行两次，但在滚动时不运行。Vue/Nuxt实现这一点的方法是什么？

好的，这里有一个使用插件的解决方案。也许有更好的方法：

1） 在

plugins/scroll.js

``` javascript
// https://vuejs.org/v2/cookbook/creating-custom-scroll-directives.html#Base-Example
import Vue from 'vue'

Vue.directive('scroll', {
  inserted: function (el, binding) {
    let f = function (evt) {
      if (binding.value(evt, el)) {
        window.removeEventListener('scroll', f)
      }
    }
    window.addEventListener('scroll', f)
  }
})
```

``` javascript
module.exports = {
  head: { },
  plugins: [
    { src: '~/plugins/scroll.js', },
  ]
}
```

2） 在

numxt.config.js

``` javascript
// https://vuejs.org/v2/cookbook/creating-custom-scroll-directives.html#Base-Example
import Vue from 'vue'

Vue.directive('scroll', {
  inserted: function (el, binding) {
    let f = function (evt) {
      if (binding.value(evt, el)) {
        window.removeEventListener('scroll', f)
      }
    }
    window.addEventListener('scroll', f)
  }
})
```

``` javascript
module.exports = {
  head: { },
  plugins: [
    { src: '~/plugins/scroll.js', },
  ]
}
```

3） 使用

v-scroll

指令在

/layouts/default.vue

``` javascript
<template lang="pug">
div(v-scroll="shrinkNav")
  b-navbar.text-center(toggleable="sm" type="light" sticky)
    #myNav.mx-auto.bg-white
      b-navbar-toggle(target="nav_collapse")
      b-navbar-brand.mx-auto(href="/#home") Example.org
      b-collapse#nav_collapse.mx-auto(is-nav='')
        b-navbar-nav(justified, style="min-width: 600px").vertical-center
          b-nav-item.my-auto(to='/#home') Home
  #content.container
    nuxt
</template>

<script>
  export default {
    methods: {
      shrinkNav() {
        var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop
        var nav = document.getElementById('myNav')
        console.log(scrollPosition, nav)
        if(scrollPosition >= 150) {
          nav.classList.add('shrink')
        } else {
          nav.classList.remove('shrink')
        }
      },
    },
  }
</script>

<style>
  nav.navbar {
    margin: 0;
    padding: 0;
  }
  #myNav {
    border-radius: 0 0 10px 10px;
    border: 2px solid purple;
    border-top: none;
  }
  #myNav.shrink {
    border: none;
  }
</style>
```

``javascript
div（v-scroll=“shrinkNav”）
b-navbar.文本中心（toggleable=“sm”type=“light”sticky）
#myNav.mx-auto.bg-white
b-navbar-toggle（target=“导航折叠”）
b-navbar-brand.mx auto（href=“/#home”）Example.org
b-collapse#nav_collapse.mx auto（is nav=''）
b-navbar-nav（对齐，style=“最小宽度：600px”）。垂直中心
b-nav-item.my auto（to='/#home'）home
#内容容器
努克斯
导出默认值{
方法：{
shrinkNav（）{
var scrollPosition=document.documentElement.scrollTop | | document.body.scrollTop
var nav=document.getElementById（'myNav'）
控制台日志（滚动位置，导航）
如果（滚动位置>=150）{
nav.classList.add（'shrink'）
}否则{
nav.classList.remove（'shrink'）
}
},
},
}
导航条{
保证金：0；
填充：0；
}
#我的导航{
边界半径：0 10px 10px；
边框：2件纯色紫色；
边界顶部：无；
}
#myNav.shrink{
边界：无；
}
```

在您的.vue中：

部分：

<nav id="nav" class="navbar is-transparent is-fixed-top">

export default {
mounted() {
      this.$nextTick(function(){
        window.addEventListener("scroll", function(){
          var navbar = document.getElementById("nav");
          var nav_classes = navbar.classList;
          if(document.documentElement.scrollTop >= 150) {
            if (nav_classes.contains("shrink") === false) {
              nav_classes.toggle("shrink");
            }
          }
          else {
            if (nav_classes.contains("shrink") === true) {
              nav_classes.toggle("shrink");
            }
          }
        })
      })
    },
}

---

ss动画在最后一帧后停止