Updated docs for new version

README.md

@@ -1,10 +1,10 @@
-# Affixes an element on the screen while you scroll
-This vue 2 component will act kinda like Bootstrap's Affix plugin, but in a simpler and smarter way.
+# Affixes an element on the screen based on a relative element
+This Vue2.x plugin works in a similar way as Bootstrap's Affix, but in a better and smarter way.
 
- - Affixes your element as you scroll
- - No dependencies
+ - Affixes an element based on a relative element as you scroll
  - Only needs 3 super simple configuration steps
- - Dispatch events when the affix class changes
+ - Dispatches events
+ - No dependencies
  - Vue2
  - Uses pure JS!
 
@@ -42,24 +42,8 @@ Example below:
 
 This will make the `.sidebar` element stay fixed while in the `#home` element viewport. Simple as that.
 
-## Events
-vue-affix will dispatch 3 different events:
- - `affixtop` will be dispatched when the `.affix-top` class is applied, that is when you scroll above the relative element.
- - `affix` will be dispatched when the `.affix` class is applied, that is while you scroll inside the relative element.
- - `affixbottom` will be dispatched when the `.affix-bottom` class is applied, that is when you scroll below the relative element.
-
-Those can be catched as I show in the example below:
-```html
-<affix class="sidebar" relative-element-selector="#home" v-on:affixbottom="yourFunction()">
-    <a href="#home">Home</a>
-    <a href="#about-us">About Us</a>
-    <a href="#portfolio">Portfolio</a>
-    <a href="#contact">Contact</a>
-</affix>
-```
-
 ## How the plugin works
-It works similar to Bootstrap's Affix plugin, it will add 3 classes (`.affix-top`, `.affix` and `.affix-bottom`) to the element to affix while you scroll the page.
+It works similar to Bootstrap's Affix plugin, it will add 3 classes (`.affix-top`, `.affix` and `.affix-bottom`) to the affixed element while you scroll the page.
 
 Unlike Bootstrap's Affix, all you need to do in vue-affix is set a width value for the class `.vue-affix` (that's because when the `position: fixed` property is applied, it will lose it's relative width value) and add an element in the `relative-element-selector` property.
 
@@ -79,11 +63,13 @@ The only configuration you need to do in CSS is setting a width for the `.vue-af
 ```
 
 ### Props
+These are all the props you can pass to the component:
 ``` javascript
 /**
  * The relative element selector string. The relative element is
  * the element you want your affix to be related to, as it will
- * not be related to the window.
+ * not be related to the window. The element will be affixed when
+ * the window reaches the relative element.
  *
  * @example '#contact'
  * @type {String}
@@ -119,5 +105,41 @@ offset: {
 enabled: {
     type: Boolean,
     default: true
+},
+
+/**
+ * Sets if the affix should be 'scrollable' when it is
+ * taller than the viewport or if it should always be
+ * affixed to the top until it reaches the end of the
+ * relative element.
+ *
+ * @type {Boolean}
+ */
+scrollAffix: {
+    type: Boolean,
+    default: false
 }
 ```
+
+## Events
+vue-affix will dispatch 3 different events if `scroll-affix` prop is set to false:
+ - `affixtop` will be dispatched when the `.affix-top` class is applied, that is when you scroll above the relative element.
+ - `affix` will be dispatched when the `.affix` class is applied, that is while you scroll inside the relative element.
+ - `affixbottom` will be dispatched when the `.affix-bottom` class is applied, that is when you scroll below the relative element.
+
+If `scroll-affix` prop is set to true, it will fire 5 different events:
+ - `scrollaffixscrolling` will be dispatched when the affixed element is being scrolled (not fixed).
+ - `scrollaffixup` will be dispatched when the affixed element gets fixed to the top of the screen.
+ - `scrollaffixdown` will be dispatched when the affixed element gets fixed to the bottom of the screen.
+ - `scrollaffixtop` will be dispatched when the affixed element reaches the top of the relative element.
+ - `scrollaffixbottom` will be dispatched when the affixed element reaches the bottom of the relative element.
+
+Those can be catched as I show in the example below:
+```html
+<affix class="sidebar" relative-element-selector="#home" v-on:affixbottom="yourFunction()">
+    <a href="#home">Home</a>
+    <a href="#about-us">About Us</a>
+    <a href="#portfolio">Portfolio</a>
+    <a href="#contact">Contact</a>
+</affix>
+```