4

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
7
  • Sí, es la clase que tiene mi elemento en el HTML. Commented el 21 mar. 2018 a las 18:46
  • Ahí agregué el HTML. Es todo lo que hay. El SCSS no tiene sentido. Commented el 21 mar. 2018 a las 18:52
  • Sí, es Vue2, usé el template de webpack. Si podés explayarte en una respuesta, te lo agradezco! Commented el 21 mar. 2018 a las 19:01
  • Puedes adjuntar la estructura de tu proyecto. Commented el 21 mar. 2018 a las 20:08
  • Sí, estoy usando bootstrap-vue. @bercklynCarlosviza en breve publico la estructura. Saludos! Commented el 22 mar. 2018 a las 11:50

1 respuesta 1

4

Bueno la cosa es asi..

Hay que hacer varios retoques, pero se puede hacer casi sin preocuparse por buscar el elemento en el DOM, cosa que en general VUE resuelve automaticamente.

Lo que vamos a hacer es por pasos:

  • Agregar a la navbar la propiedad Sticky

    <b-navbar sticky>
    
  • Agregarle a la navbar una clase propia, la que va a controlar la propiedad en el CSS.

    <b-navbar sticky v-bind:class="{shrink:Escroleando}">
    
  • Agregar la propiedad Escroleando al modelo:

    data() {
        return {
            Escroleando: false,
            ....
        }
    },
    
  • Cambiar la funcion Scroll a lo siguiente:

    methods: {
        resizeOnScroll: function () {
            if (window.scrollY  >= 20) {
                this.Escroleando = true
            }
            else {
                this.Escroleando = false;
            }
        },
        .....
    }
    

    O mucho mas lindo algo asi:

    resizeOnScroll: function () {
        this.Escroleando = (window.scrollY >= 20);
    }
    
  • Y agregar el style correspondiente..

    <style>
        nav.navbar.shrink {
            max-height: 35px;
        }
    </style>
    

Reutilice tus funciones create y destroyed, y con eso cuando haces scroll, la barra se achica. Obviamente hay que trabajar sobre el CSS, pero basicamente hace lo que queres.

Agrego un link, con un projecto de ejemplo ACA

8
  • Excelente, primero te agradezco por tomarte el tiempo para formular la respuesta y ayudarme, @gbianchi. Estoy poniendo en práctica tu solución, pero no logro ver que cambie la barra de tamaño. Cuando decís de agregar al navbar la propiedad sticky, te referís a poner directamente position: sticky? Actualmente está fixed. Eso es lo único que tendría distinto. El resto estoy haciendo todo exactamente igual. Commented el 22 mar. 2018 a las 17:46
  • tiene que ser sticky. si esta fixed, se va a perder cuando scrolees. Prueba cambiar a sticky, y si te genera otra duda vemos.. ah.. y ahora edito el codigo, el sticky no esta!
    – gbianchi
    Commented el 22 mar. 2018 a las 17:47
  • Creo que también en la parte de los estilos estás usando navbar como una clase, y en el HTML está con id. Sigue sin funcionarme. El método resizeOnScroll lo saqué de los métodos, está ok? Commented el 22 mar. 2018 a las 17:54
  • no. el metodo resizeonscroll va en los metodos.. en el ejemplo que probe anduvo todo asi.. espera que aclaro eso tambien... el id del navbar no importa. Pero saquesmolo.. aca no lo tengo..
    – gbianchi
    Commented el 22 mar. 2018 a las 18:01
  • Todavía sigue sin funcionar. Ni siquiera veo que se agregue la clase shrink al elemento en las Developer Tools. A veces los elementos de Bootstrap son difíciles de sobrescribir. Tendrá que ver con eso? (Muchas gracias de antemano) Commented el 22 mar. 2018 a las 18:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.