Trying to code a Vue.js Navbar that changes color when scrolling using Jquery and CSS script. It works, but I encountered an error with Vue.js not supporting the syntax '$' after page refresh, resulting in a "$ not defined" error message. As a newcomer to Vue.js, I apologize if there are any errors in my implementation. Any assistance would be greatly appreciated. Thank you :).
Here is the Vue.js code :
.navbar{
transition:500ms ease;
background: transparent;
font-weight: 600;
}
.navbar.scrolled {
background:#fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.nav-link {
color: white;
}
.nav-link:hover {
color: lightgray;
}
.nav-link:focus {
color: lightgray;
}
.navbar-brand.change-black, .nav-link.change-black {
color:#000;
}
.nav-link.change-black:hover, .nav-link.change-black:focus {
color:#0d6efd;
}<template>
<b-app>
<b-nav class="navbar navbar-expand-lg pt-12 pb-12 fixed-top fluid"
data-aos="fade-down" data-aos-duration="700"
>
<b-container>
<b-col lg="3">
<b-nav-item class="navbar-brand" href="#">
<span>APR</span>
</b-nav-item>
</b-col>
<b-col lg="8" class="d-flex">
<b-nav-item class="nav-link" href="#">Home</b-nav-item>
<b-nav-item class="nav-link" href="#">Procedure</b-nav-item>
<b-nav-item class="nav-link" href="#">About</b-nav-item>
</b-col>
<b-col lg="1" class="d-flex" right>
<b-nav-item-dropdown
id="my-nav-dropdown"
text="Masuk"
toggle-class="nav-link-custom"
right
>
<b-dropdown-item>Lecturer</b-dropdown-item>
<b-dropdown-divider></b-dropdown-divider>
<b-dropdown-item>Secretary</b-dropdown-item>
</b-nav-item-dropdown>
</b-col>
</b-container>
</b-nav>
</b-app>
</template>
<script>
export default {
name: 'CoverLayout',
data () {
return {
}
},
}
$(window).scroll(function(){
$('.navbar').toggleClass('scrolled', $(this).scrollTop() > 50);
$('.nav-link').toggleClass('change-black', $(this).scrollTop() > 50);
$('.navbar-brand').toggleClass('change-black', $(this).scrollTop() > 50);
$('.back-to-top').toggleClass('active', $(this).scrollTop() > 50);
});
</script>[Works fine without refreshing][Error occurs upon refreshing]