I am seeking help with creating a Fixed Navbar on Scrolling using Vue.js.
I initially wrote some jQuery code for this functionality, but now I want to transition it to Vue.js.
The updated code can be found in a file named navbar.js.
Previous 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');
}
}
});
});
Updated Vue JS Code:
const navbar = new Vue({
el: '#f-navbar',
data: function fixedHeader() {
return {
stickyNavbar: {
isSticky: false
}
}
},
mounted() {
},
methods: {
handleScrolling () {
}
}
});
HTML Markup:
<nav id="f-navbar" class="navbar navbar-custom navbar-expand-lg navbar-light bg-white"
v-bind:class="stickyNavbar"></nav>