第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

我們可以在 Vue.js 中使用 jquery onscroll 函數(shù)嗎?

我們可以在 Vue.js 中使用 jquery onscroll 函數(shù)嗎?

拉丁的傳說 2023-03-03 15:45:14
我想在滾動(dòng)功能上使用 JQuery 將我的導(dǎo)航欄固定在 vue.js 的頂部,我該怎么做。這就是我正在做的我的組件,它是引導(dǎo)程序中的導(dǎo)航欄,我想將其粘貼在滾動(dòng)條上。也讓我知道任何更好的方法或解決方案請(qǐng)給我'''<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>'''我的這個(gè)組件的腳本對(duì)我不起作用任何人都可以幫助我 '<script>import $ from 'jquery'export default {  name: 'AppNav',    created () {    window.addEventListener('scroll', this.scrollFunction);  },  destroyed () {    window.removeEventListener('scroll', this.scrollFunction);  },
查看完整描述

2 回答

?
夢(mèng)里花落0921

TA貢獻(xiàn)1772條經(jīng)驗(yàn) 獲得超6個(gè)贊

我認(rèn)為你可以在沒有 jQuery 的情況下達(dá)到預(yù)期的效果。:class=...基本上,您需要基于滾動(dòng)事件(參見參考資料)的元素類(參見 參考資料)的條件@scroll=...。這個(gè)例子有幫助嗎?


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>


查看完整回答
反對(duì) 回復(fù) 2023-03-03
?
慕運(yùn)維8079593

TA貢獻(xiàn)1876條經(jīng)驗(yàn) 獲得超5個(gè)贊

根據(jù)您的文檔結(jié)構(gòu)和您希望實(shí)現(xiàn)的確切行為,可能只能通過position: sticky CSS 屬性來實(shí)現(xiàn)。它并不總是可行并且有一些限制,但值得一試。



查看完整回答
反對(duì) 回復(fù) 2023-03-03
  • 2 回答
  • 0 關(guān)注
  • 122 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)