Измените Navbar на фиксированный в Scroll, используя VueJS

Question

У меня есть простой вопрос Как создать фиксированный Navbar при прокрутке, используя Vue

Я создаю jQuery код, но хочу перейти на Vue

Я обновил мой код Vue JS в файле с именем navbar. js

jQuery CODE

$(document).ready(function fixedHeader() {

    var windows = $(window);
    var screenSize = windows.width();
    var sticky = $('#f-navbar');
    var $html = $('html');
    var $body = $('body');

    windows.on('scroll', function () {
        var scroll = windows.scrollTop();
        var headerHeight = sticky.height();

        if (screenSize >= 320) {
            if (scroll < headerHeight) {
                sticky.removeClass('is-sticky');
            } else {
                sticky.addClass('is-sticky');
            }
        }
    });
});

Vue JS Код

const navbar = new Vue({
    el: '#f-navbar',
    data: function fixedHeader() {
        return {
            stickyNavbar: {
                isSticky: false
            }
        }
    },
    mounted() {

    },
    methods: {
        handleScrolling () {

        }
    }
});

HTML КОД

<nav id="f-navbar" class="navbar navbar-custom navbar-expand-lg navbar-light bg-white"
     v-bind:class="stickyNavbar"></nav>

Answer 1

$ (документ) .ready примерно похож на mounted хук Vue, но применяется к Компоненту.

В вашем Navbar. vue <script>

mounted() {
    window.addEventListener('resize', this.getWindowWidth);
  },
data() {
    return {
      screenSize: 0,
    };
  },
  methods: {
    getWindowWidth() {
      this.screenSize= window.innerWidth;
    },
  },

на вашем <template> для компонента NavBar,

назначьте :class в соответствии с вашими условиями

<nav :class="{'is-sticky': screenSize == 320}">

ОБНОВЛЕНИЕ: класс is-sticky отображается только когда scrollPosition = 320 в ширине окна.