Estoy haciendo un sitio en Vue.js, y quiero poner en práctica el típico efecto de resizing del nav al hacer scroll.
Tengo un método para ello, y otros dos listeners del scroll.
El tema es que no reconoce el elemento nav
, y me da el siguiente error en la consola (todas las veces que se hace scroll): Uncaught TypeError: Cannot set property 'className' of null
. No entiendo por qué, ya que he definido mi constante.
Header.vue
:
export default {
name: 'header-app',
methods: {
resizeOnScroll: function () {
const nav = document.querySelector('site-header')
if (this.scrollY >= 20) nav.classList.add = 'scroll'
else nav.classList.remove = 'scroll'
}
},
created () {
window.addEventListener('scroll', this.resizeOnScroll)
},
destroyed () {
window.addEventListener('scroll', this.resizeOnScroll)
}
}
Header.html:
<b-navbar class="site-header" id="navbar">
<b-container>
<b-navbar-brand href="#">
<img class="logo" src="../../assets/logo.png" alt="Site logo">
</b-navbar-brand>
<b-navbar-nav>
<div class="icons">
<a href="https://www.facebook.com" target="_blank"><i class="icon-facebook"></i></a>
<a href="https://play.google.com/store/appsa" target="_blank"><i class="icon-google-play"></i></a>
</div>
</b-navbar-nav>
</b-container>
</b-navbar>
Estructura del proyecto
|- build
|- config
|- dist
|- node_modules
|- src
|- assets
|- components
|- Header
|- Header.vue
|- Header.html
|- Header.scss
|- router
|- sass
|- App.vue
|- main.js
|- static
|- .babelrc
|- .editorconfig
|- .eslintignore
|- .eslint.js
|- .gitignore
|- .postcssrc.js
|- index.html
|- package.json