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

【问题标题】：Can We use jquery onscroll function in Vue.js?我们可以在 Vue.js 中使用 jquery onscroll 函数吗？
【发布时间】：2020-12-31 13:37:49
【问题描述】：

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

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

'''

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

【问题讨论】：

标签： javascript html jquery vue.js vue-component

【解决方案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>

【讨论】：

【解决方案2】：

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

【讨论】：