使用 VueJS 将导航栏更改为在滚动中固定

Question

我有一个简单的问题如何使用 Vue 创建一个固定的滚动导航栏

我创建了一个 jQuery 代码，但我想迁移到 Vue

我在名为 navbar.js 的文件中将我的代码更新为 Vue JS

jQuery 代码

$(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

$(document).ready 类似于 Vue 的 mounted 钩子，但适用于组件。

在你的 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 的窗口宽度大小时显示。