Sticky滾動固定元素插件

簡介

在頁面滾動時將指定元素固定在窗口上的功能

1.vue中使用

npm install vue-sticky --save 安裝插件

<template>
<div class="body-right body-text"  v-sticky="{ zIndex: 9, stickyTop: 0, disabled: false}">
    <router-view name="rightContent" />
</div>
</template>
<script>
import VueSticky from "vue-sticky"
export default {
  name: "App",
  directives: {
    'sticky': VueSticky,
  },
}
</script>

參考網址 https://www.npmjs.com/package/vue-sticky

2. 原生html中使用

<script src="js/jquery.min.js"></script>
<script src="js/hc-sticky.js"></script>
<script>
jQuery(document).ready(function($) {
  $('#element').hcSticky({
    stickTo: '#content',
    top: 0
  });
});
</script>

參考網址 http://www.jq22.com/jquery-info17546

3.總結 

無論是vue還是原生html中吸附的節點要寫在父級元素上才能生效