Add an options to use with dynamic pages

README.md

@@ -139,8 +139,9 @@ var options = {
     restOpacity: Number,            // opacity when not 'dynamic' and rested
     lockX: Boolean,                 // only move on the X axis
     lockY: Boolean,                 // only move on the Y axis
-    catchDistance: Number           // distance to recycle previous joystick in
+    catchDistance: Number,          // distance to recycle previous joystick in
                                     // 'semi' mode
+    dynamic_page: Boolean,          // Enable if the page has dynamically visible elements
 };
 ```
 
@@ -252,6 +253,8 @@ Locks joystick's movement to the x (horizontal) axis
 ### `options.lockY` defaults to false
 Locks joystick's movement to the y (vertical) axis
 
+### `options.dynamic_page` defaults to true
+Enable if the page has dynamically visible elements such as for Vue, React, Angular or simply some CSS hiding or showing some DOM.
 
 ----
 

src/collection.js

@@ -33,7 +33,8 @@ function Collection (manager, options) {
         restJoystick: true,
         restOpacity: 0.5,
         lockX: false,
-        lockY: false
+        lockY: false,
+        dynamic_page: false
     };
 
     self.config(options);
@@ -377,6 +378,15 @@ Collection.prototype.processOnMove = function (evt) {
         return;
     }
 
+    if (opts.dynamic_page) {
+        var scroll = u.getScroll();
+        pos = nipple.el.getBoundingClientRect();
+        nipple.position = {
+            x: scroll.x + pos.left,
+            y: scroll.y + pos.top
+        };
+    }
+
     nipple.identifier = identifier;
 
     var size = nipple.options.size / 2;