我们可以在Vue.js中使用jquery onscroll函数吗

Question

我想使用JQuery on scroll函数将我的导航栏粘贴在vue.js的顶部，我该怎么做？

这就是我正在做的组件，它是引导程序中的导航栏，我想把它粘在croll上。也让我知道任何更好的方法或解决方案，请给我

''

<template>
<div>
<b-navbar class="navbars" toggleable="lg" type="dark" variant="info" v-on:scroll="scrollFunction">
<router-link to="/"><b-navbar-brand href="/">Home</b-navbar-brand></router-link>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<b-navbar-nav>
<router-link to="/contact"><b-nav-item href="/contact">contact</b-nav-item></router-link>
<b-nav-item href="#" disabled>Disabled</b-nav-item>
</b-navbar-nav>
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-nav-form>
<b-form-input size="sm" class="mr-sm-2" placeholder="Search"></b-form-input>
<b-button size="sm" class="my-2 my-sm-0" type="submit">Search</b-button>
</b-nav-form>
<b-nav-item-dropdown text="Lang" right>
<b-dropdown-item href="#">EN</b-dropdown-item>
<b-dropdown-item href="#">ES</b-dropdown-item>
<b-dropdown-item href="#">RU</b-dropdown-item>
<b-dropdown-item href="#">FA</b-dropdown-item>
</b-nav-item-dropdown>
<b-nav-item-dropdown right>
<!-- Using 'button-content' slot -->
<template v-slot:button-content>
<em>User</em>
</template>
<b-dropdown-item href="#">Profile</b-dropdown-item>
<b-dropdown-item href="#">Sign Out</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</div>
</template>

''

我的这个组件的脚本对我不起作用任何人都可以帮助我'

<script>
import $ from 'jquery'
export default {
name: 'AppNav',

created () {
window.addEventListener('scroll', this.scrollFunction);
},
destroyed () {
window.removeEventListener('scroll', this.scrollFunction);
},
methods: {
scrollFunction (event) {
// Any code to be executed when the window is scrolled
$(window).on('scroll', () => {
if ($(this).scrollTop() > 20) { // Set position from top to add class
$('.navbars').addClass('header-appear');
}
else {
$('.navbars').removeClass('header-appear');
}
});
}
}
}
</script>

'

Answer 1

我认为您可以在没有jQuery的情况下实现所需的效果。基本上，您需要一个基于滚动事件(请参阅@scroll=...(的元素类的条件(请参见:class=...(。这个例子有用吗？

var app = new Vue({
el: '.scroll-demo',
data: {
scrollStatus:false,
scrollTriggerY:50
},
created:function(){
window.addEventListener("scroll", this.scrollManager);
},
methods:{
scrollManager:function(){
var scrollY = this.$refs["scrollParent"].scrollTop;
this.scrollStatus = scrollY > this.scrollTriggerY;
}
}
});

div {
border:1px solid #333;
}
.scroll-demo {
position:relative;
height:200px;
overflow:auto;
}
.main-content {
height:1000px;
}
.nav-bar {
height:30px;
background-color:grey;
}
.header-appear {
background-color:red;
position:sticky;
top:0px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!-- just some demo app -->
<div class="scroll-demo" @scroll="scrollManager" ref="scrollParent">
<div class="nav-bar" :class="{'header-appear': scrollStatus}">...navbar...</div>
<div class="main-content">
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
<p>Lorem ipsum...</p>
</div>
</div>

Answer 2

根据文档的结构和您希望实现的确切行为，可能只有使用position:stick CSS属性才能实现。这并不总是可能的，也有一些局限性，但值得一试。