Fixed Navbar on Scroll Using VueJS - Bootstrap 4

How can I make the navbar Fixed only on Scroll with Screen Size 320
I made a simple jQuery Code work better but I need to change it into VueJS
this is my whole CODE
I updated my code to Vue JS in File called 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 CODE

window.Vue = require('vue');

const navbar = new Vue({
    el: '#f-navbar',
    data() {
        return {
            isSticky: false,
            stickyClass: 'is_sticky'
        }
    },
    methods: {
        handleScroll () {}
    },
    mounted () {
        this.handleScroll();
    }
});

HTML CODE

<nav id="f-navbar" 
     class="navbar navbar-custom navbar-expand-lg navbar-light bg-white"
     v-bind:class="[isSticky ? stickyClass : '']">
<a class="navbar-brand " href="#">LOGO</a>
</navbar>

CSS CODE

.navbar.is_sticky {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1030;
        width: 100%;
        -webkit-animation: .95s ease-in-out 0s normal none 1 running fadeInDown;
        animation: .95s ease-in-out 0s normal none 1 running fadeInDown;
        -webkit-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
        -webkit-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
        box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.1);
}

This is just a suggestion, but is it an option for you to use jQuery & Vue together? When I initially started using Bootstrap 4 with Vue, I thought I would have to rewrite jQuery functionality in Vue, but I found that they work very nicely together.

I load any jQuery I need in the “mounted” stage of my Vue file, let me know if you need tips on this, and I can send over some extra info on it.

You can add the event listiner in mounted method, use same logic as written in jQuery, but here you need to change data value instead of adding or removing the class, like:
function mouned (){
Window.addEventListiner(‘scroll’, this.handleScroll)
}

function breforeDestroy() // remove listiner

yes my friend help me please

can you show me more please

I think this video will help you (jQuery + Bootstrap + Vue):

1 Like

I will see it know my friend thank you

1 Like

If you haven’t tired Meteor as a backend for Vue, give it a try, it’s like Vue for the rest of your stack :+1:

You can use event listener as @hitesh399 suggested

data() {
        return {
            isSticky: false,
            stickyClass: 'is_sticky',
           scrollPosition:0
        }
    },
    created () {
            window.addEventListener('scroll', this.handleScroll);
    },
    destroyed () {
            window.removeEventListener('scroll', this.handleScroll);
    },
    methods:{
    handleScroll(event){
                this.scrollPosition = window.scrollY
                if(this.scrollPosition>=100){
                    this.isSticky=true
                }else{
                    this.isSticky=false
                }
    }
    }
1 Like

I just joined this forum to react to your solution. I like it.