Vue.js component implementing the sticky-sidebar library.

npm install vue-sticky-sidebar@1.0.5


Vue.js component implementing the sticky-sidebar-v2 library.

Version Downloads/Week Minified Bundlesize Minified Gzipped Bundlesize


Using npm:

$ npm install --save vue-sticky-sidebar

Using yarn:

$ yarn add vue-sticky-sidebar


  <div id="app">
      <div class="container">
        <h1>Site Title</h1>

    <div class="container clearfix">
      <vue-sticky-sidebar class="sidebar" containerSelector=".container" innerWrapperSelector='.sidebar__inner'>
            <p>This is sticky column</p>
      <div id="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tempus id leo et aliquam. Proin consectetur ligula vel neque cursus laoreet. Nullam dignissim, augue at consectetur pellentesque, metus ipsum interdum sapien, quis ornare quam enim vel ipsum.</p> dolor.</p>

      <p>Very Tall Footer</p>

import vueStickySidebar from "vue-sticky-sidebar";

export default {
  name: "ServeDev",
  components: {
    "vue-sticky-sidebar": vueStickySidebar


Name Type Default Description
topSpacing Numeric, Function 0 Additional top spacing of the element when it becomes sticky.
bottomSpacing Numeric, Function 0 Additional bottom spacing of the element when it becomes sticky.
containerSelector String, False false Container sidebar selector to know what the beginning and end of sticky element.
innerWrapperSelector String .inner-wrapper-sticky Inner wrapper selector.
stickyClass String, False is-affixed The name of CSS class to apply to elements when they have become stuck.
resizeSensor Boolean true Detect when sidebar and its container change height so re-calculate their dimensions.
minWidth Numeric 0 The sidebar returns to its normal position if its width below this value.

Find more reference at official sticky-sidebar-v2.


  • Add Events