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中吸附的节点要写在父级元素上才能生效