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

Question

我想在滚动功能上使用 JQuery 将我的导航栏固定在 vue.js 的顶部，我该怎么做。

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

'''

<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);

  },

Answer 1

我认为你可以在没有 jQuery 的情况下达到预期的效果。:class=...基本上，您需要基于滚动事件（参见参考资料）的元素类（参见 参考资料）的条件@scroll=...。这个例子有帮助吗？var app = new Vue({&nbsp; el: '.scroll-demo',&nbsp; data: {&nbsp; &nbsp; scrollStatus:false,&nbsp; &nbsp; scrollTriggerY:50&nbsp; },&nbsp; created:function(){&nbsp; &nbsp; window.addEventListener("scroll", this.scrollManager);&nbsp; },&nbsp; methods:{&nbsp; &nbsp; scrollManager:function(){&nbsp; &nbsp; &nbsp; var scrollY = this.$refs["scrollParent"].scrollTop;&nbsp; &nbsp; &nbsp; this.scrollStatus = scrollY > this.scrollTriggerY;&nbsp; &nbsp; }&nbsp; }});div {&nbsp; border:1px solid #333;}.scroll-demo {&nbsp; position:relative;&nbsp; height:200px;&nbsp; overflow:auto;}.main-content {&nbsp; height:1000px;}.nav-bar {&nbsp; height:30px;&nbsp; background-color:grey;}.header-appear {&nbsp; background-color:red;&nbsp; position:sticky;&nbsp; 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">&nbsp; <div class="nav-bar" :class="{'header-appear': scrollStatus}">...navbar...</div>&nbsp; <div class="main-content">&nbsp; &nbsp; <p>Lorem ipsum...</p>&nbsp; &nbsp; <p>Lorem ipsum...</p>&nbsp; &nbsp; <p>Lorem ipsum...</p>&nbsp; </div></div>

Answer 2

根据您的文档结构和您希望实现的确切行为，可能只能通过position: sticky&nbsp;CSS 属性来实现。它并不总是可行并且有一些限制，但值得一试。