A vue directive that support multiple DOM Node stick to top automatically (一个支持多DOM元素自动吸顶的vue指令)

Related tags

Scroll vue-stickto
Overview

vue-stickto

简体中文

A vue directive that support multiple DOM Node stick to top automatically (一个支持多DOM元素自动吸顶的vue指令)

Online Demo Here

demo.gif

Install

npm install vue-stickto

use

  1. import
import Vue from 'vue'
import VueStickto from 'vue-stickto'
Vue.use(VueStickto)
  1. simply add the directive into a tag
<div v-stickto>
    
</div>
  1. see the result

If you're using script tag to import

copy the dist/VueStickto.js to the place wherever you want and <script src="[path]Vuestickto.js"/>

You might also like...
⌨️ A Safari browser extension, use keyboard control browser jumps, scrolling, switching tabs and more. support iPadOS and macOS

Support Keyboard Key Description k Scroll up j Scroll down u Fast scroll up d Fast scroll down h Scroll left l Scroll right f Highlight shift Open lin

Scroll Picker Component for Vue2. Support All Gestures of Mouse(even also MouseWheel!) and Touch.

Scroll Picker Component for Vue2. Support All Gestures of Mouse(even also MouseWheel!) and Touch.

A Vue.js 2.0 directive for vue component. Load more data when scroller arrived end.

A Vue.js 2.0 directive for vue component. Load more data when scroller arrived end.

🖱️ Vue directive to keep things scrolled to the bottom.

Installing Using a package manager (recommended) The recommended way of installing vue-chat-scroll is using the npm package with the npm (or yarn) pac

A Vue.js directive for body scroll locking without breaking scrolling of a target element.

v-scroll-lock A Vue.js directive for body scroll locking (for iOS Mobile and Tablet, Android, desktop Safari/Chrome/Firefox) without breaking scrollin

Vue directive wrapper for smooth-scrollbar

smooth-vuebar Vue directive wrapper for smooth-scrollbar Demo You can refer to the wrapped library's demo. Why There are many other wrappers for this

Lightweight package for highlighting menu items as you scroll the page, also scrolling to target section when item clicked. Use as a vue component/directive or in vanilla js.

navscroll-js Installation This package is available on npm. Using npm: npm install --save navscroll Using yarn: yarn add navscroll Directly include it

A tiny Vue directive that stop propagation scroll when edge reached
A tiny Vue directive that stop propagation scroll when edge reached

vue-scroll-stop A tiny Vue directive that stop propagation scroll when edge reached. Works with desktop mousewheel and mobile touchmove events ✅ On ❌

(🗃️ Archived) Vue 2 directive for custom scrollbar that uses native scroll behavior. Lightweight, performant, customizable and without dependencies. Used successfully in production on https://ggather.com

🗃️ Archived & No Longer Maintained I've decided to archive this library because my priorities changed a bit and I no longer have enough resources (ti

Comments
  • 只支持检测 html 的滚动条吗?

    只支持检测 html 的滚动条吗?

    我这里因为是后台管理项目,滚动是在一个 div 上的。 这个怎么能使用呢

    下面这种,滚动条在 div 上

    <html> ---> no scroll bar
     <body> ---> no scroll bar
        <div>      ---> With scroll bar
          <div vue-stickto>
           xxx 工具栏
          </div>
         <section> 内容很长,希望工具类在该内容下滚动的时候 固定 </section>
       </div>
     </body>
    </html>
    
    opened by zq99299 0
A Back-to-top component for Vue.js, which scroll page to the top when clicked

Vue Backtotop Component A Back-to-top component for Vue.js, which scroll page to the top when clicked Demo See demo. Install via npm npm install vue-b

Caio Fernandes 183 Nov 17, 2022
A Vue directive that prevents vertical scrolling outside the current element when top or bottom are reached.

A Vue directive that prevents vertical scrolling outside the current element when top or bottom are reached.

Carlos González 20 Sep 27, 2021
Infinite scroll list for Vue.js with DOM recycling.

vue-recyclist (not maintained) Infinite scroll list for Vue.js (v2.1+) with DOM recycling. Demo Installation npm install -D vue-recyclist Import impor

Tong 263 Jul 18, 2022
A Vue.js component to top of the page

vue-scroll-up Installation Get from npm / yarn: npm i vue-scroll-up yarn add vue-scroll-up or just include vue-scroll-up.js to your view like <script

Willy Hong 8 Feb 16, 2022
A scroll to top component for Vue 3

A scroll to top component for Vue 3

Willy Hong 4 Aug 26, 2021
Scroll to page top button, Vue.js component.

vue-go-top Scroll to page top button, Vue.js component. Demo Demo Install Browser <script src="vue.js"></script> <script src="vue-go-top.min.js"></scr

null 30 Dec 7, 2022
Very simple page top scroll seek bar with Vue.js

Very simple page top scroll seek bar with Vue.js

Akira Kanno 0 Nov 21, 2021
Top bar indicating amount of content scrolled

Scrol indicator for vue.js apps Demo See DEMO here Install Run npm install vue-content-scroll-progress --save Usage Add in the component import MyScro

Mikhail Kuznetcov 25 Jul 30, 2022
A sigle-page scroll plugin based on [email protected],support for mobile and PC .

fullpage-vue A sigle-page scroll plugin based on [email protected],support for mobile and PC . 中文版 overview To achieve sigle-page scroll in mobile, support hori

abelTO 155 Oct 19, 2022
A pure vue horizontal list implementation with minimal dependencies, ssr support, mobile friendly, touch friendly and responsive now with auto scroll

A pure vue horizontal list implementation with minimal dependencies, ssr support, mobile friendly, touch friendly and responsive now with auto scroll

Mihir Kumar 5 May 14, 2022