Estoy tratando de agregar el nombre de la clase dinámicamente. Esa clase está cambiando la visualización de la barra de navegación cuando el desplazamiento de desplazamiento es superior a 50.
Este es el código jQuery (jQuery para colapsar la barra de navegación al desplazarse):
$(window).scroll(function() { if ($(".navbar-default").offset().top > 50) { $(".navbar-fixed-top").addClass("top-nav-collapse"); } else { $(".navbar-fixed-top").removeClass("top-nav-collapse"); } });Esto es lo que probé:
<script> export default { data() { return { isSticky: false, stickyClass: "top-nav-collapse", }; }, methods: { handleScroll(e) { e.prevent(); if (window.scrollY > 50) { this.isSticky = true; console.log("deneme"); } else { this.isSticky = false; } }, }, mounted() { this.handleScroll(); }, }; </script>¿Cómo puedo convertir este código?
Agregue el controlador de eventos de desplazamiento en la función mounted() y cambie la variable isSticky allí.
export default { data: () => ({ isSticky: false, }), mounted() { this.scroll_event_handler = () => { this.isSticky = window.scrollY > 50; } window.addEventListener("scroll", this.scroll_event_handler); }, unmounted() { window.removeEventListener("scroll", this.scroll_event_handler); }, }Luego, en su plantilla puede agregar/eliminar la clase de esta manera:
<nav class="navbar-fixed-top" :class="{'top-nav-collapse': isSticky}"> ... </nav>