在滚动条上粘贴元素– vue-affix

在滚动条上粘贴元素– vue-affix
插件名称 vue-affix
发布时间 2021年1月8日
插件作者 eddiemf

一个Vue.js插件,可在滚动时在窗口中添加元素,类似于Bootstrap Affix,但简单得多。

特征:

  • 滚动时附加元素
  • 没有依赖关系
  • 只需要3个超级简单的配置步骤
  • 词缀类更改时调度事件
  • Vue2
  • 使用纯JS!

安装和下载:

npm install --save-dev vue-affix

用法

  • 将元素包装在<affix>标签中
  • relative-element-selector属性中设置元素选择器
  • .vue-affixCSS中的类设置宽度值(即后缀将应用于的元素)

下面的例子:

<affix class="sidebar-menu" relative-element-selector="#example-content" style="width: 300px">
  <a href="#markup-1">Markup 1</a>
  <a href="#markup-2">Markup 2</a>
  <a href="#markup-3">Markup 3</a>
</affix>
<section id="example-content">
  <p>这是#示例内容部分,侧边栏将相对附加在其中!</p>
</section>

这将使.sidebar-menu元素在#example-content元素视口中时保持固定。就那么简单。只是不要忘记将宽度设置为.vue-affixclass!如果不设置,可能会导致意外行为!