From 088e003f9ed99a4485e5b90bcd5e021a89b588e8 Mon Sep 17 00:00:00 2001
From: Mauricio Dziedzinski <d.mauriciofarias@gmail.com>
Date: Fri, 21 Jul 2017 11:45:33 -0300
Subject: [PATCH] Updated docs for new version

---
 README.md | 68 ++++++++++++++++++++++++++++++++++++-------------------
 1 file changed, 45 insertions(+), 23 deletions(-)

diff --git a/README.md b/README.md
index 5c7d0d8..d49e438 100644
--- a/README.md
+++ b/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>
+```