diff --git a/README.md b/README.md
index 19e6f17..08c9ce2 100644
--- a/README.md
+++ b/README.md
@@ -19,7 +19,7 @@ You can find and install floativ from npm [here](https://www.npmjs.com/package/f
 Put this `$("#floativ").floativ();` inside __script tags__ at the bottom of your HTML file.
 You can also specify parameters, such as:
 ```html
-<div id="#floativ">
+<div class="floativ" id="floativ">
     <div class="floativ-container">
         <div class="floativ-head">
             <span>
diff --git a/css/floativ.css b/css/floativ.css
index c3252a3..bf258aa 100644
--- a/css/floativ.css
+++ b/css/floativ.css
@@ -1,7 +1,7 @@
-#floativ {
-    position: fixed;
+.floativ {
+    position: fixed !important;
     margin: 0 auto;
-    z-index: 9999;
+    z-index: 9999 !important;
     bottom: 0;
     left: 0;
     float: left;
diff --git a/index.html b/index.html
index c3311fe..6118c40 100644
--- a/index.html
+++ b/index.html
@@ -111,7 +111,7 @@ <h2>Usage</h2>
                         <pre>
                             <code class="language-markup">
 
-&lt;div id="#floativ"&gt;
+&lt;div class="floativ" id="floativ"&gt;
     &lt;div class="floativ-container"&gt;
         &lt;div class="floativ-head"&gt;
             &lt;span&gt;
@@ -193,7 +193,7 @@ <h1>License</h1>
 
 
     <!-- Floativ Section -->
-    <div id="floativ">
+    <div class="floativ" id="floativ">
         <div class="floativ-container">
             <div class="floativ-head">
                 <span>
diff --git a/js/floativ.js b/js/floativ.js
index 6617757..81563c0 100644
--- a/js/floativ.js
+++ b/js/floativ.js
@@ -12,14 +12,14 @@
         floativ: function(options) {
             var defaults = {
                 breakPoint: "#floativ-break", // The class where we hide our element
-                height: "100px", // Height of the float box
-                width: "auto", // Width of the float box
-                offsetPercentage: 0.33, // Adds offset to the breaking point
-                heightExpand: "160px", // Expandable height
-                widthExpand: "160px", // Expandable width
-                animate: "slow", // Animation method
-                customClass: null, // Extra class for the parent object
-                scrollbar: {} // mCustomScrollbar (default) options
+                height: "100px",              // Height of the float box
+                width: "auto",                // Width of the float box
+                offsetPercentage: 0.33,       // Adds offset to the breaking point
+                heightExpand: "160px",        // Expandable height
+                widthExpand: "160px",         // Expandable width
+                animate: "slow",              // Animation method
+                customClass: null,            // Extra class for the parent object
+                scrollbar: {}                 // mCustomScrollbar (default) options
             };
 
             var o = $.extend(defaults, options); // Merge defaults with user inputs
@@ -31,15 +31,24 @@
 
             // Do it for every element that matches selector
             this.each(function(){
-                var $this = $(this); // Assign current element to variable
+                var $this = $(this),
+                    collapseBtn = $(".floativ-collapse", $this),
+                    expandBtn = $(".floativ-expand", $this),
+                    floativWrapper = $(".floativ-wrapper", $this),
+                    floativBody = $('.floativ-body', $this),
+                    resizeTimeout;
+
                 $this.data("floativ", o); // Save settings
-                $(".floativ-collapse", $this).hide(); // Hide minus-collapse sign
-                $(".floativ-wrapper", $this).css({height: o.height, width: o.width}).mCustomScrollbar(o.scrollbar); // Apply mCustomScrollbar on element
+                collapseBtn.hide();       // Hide minus-collapse sign
+                floativWrapper.css({
+                    height: o.height,
+                    width: o.width
+                }).mCustomScrollbar(o.scrollbar); // Apply mCustomScrollbar on element
 
                 floativLoad(); // Start the plugin
 
                 function floativLoad(){
-                    $this.css({height: o.height, width: o.width})
+                    $this.css({height: o.height, width: o.width});
                     if (o.customClass !== null) $this.addClass(o.customClass);
                 }
 
@@ -54,44 +63,44 @@
                     }
                 }
 
-                $('.floativ-body', $this).bind('mousewheel DOMMouseScroll', function (e) {
+                floativBody.bind('mousewheel DOMMouseScroll', function (e) {
                     var delta = e.wheelDelta || -e.detail;
                     this.scrollTop += (delta < 0 ? 1 : -1) * 30;
                     e.preventDefault();
                 });
 
                 // Click expand button
-                $(".floativ-expand", $this).click(function (e) {
+                expandBtn.on('click', function (e) {
                     e.preventDefault();
-                    $(".floativ-collapse", $this).show();
-                    $(".floativ-expand", $this).hide();
+                    collapseBtn.show();
+                    expandBtn.hide();
                     $this.animate({height: o.floativHeight_expand, width: o.floativWidth_expand}, o.animate);
-                    $(".floativ-wrapper", $this).animate({height: o.floativHeight_expand, width: o.floativWidth_expand}, o.animate, function() {
-                        $(".floativ-wrapper", $this).mCustomScrollbar("update");
+                    floativWrapper.animate({height: o.floativHeight_expand, width: o.floativWidth_expand}, o.animate, function() {
+                        floativWrapper.mCustomScrollbar("update");
                     });
                 });
 
                 //  Click collapse button
-                $(".floativ-collapse", $this).click(function (e) {
+                collapseBtn.on('click', function (e) {
                     e.preventDefault();
-                    $(".floativ-expand", $this).show();
-                    $(".floativ-collapse", $this).hide();
+                    expandBtn.show();
+                    collapseBtn.hide();
                     $this.animate({height: o.height, width: o.width}, o.animate);
-                    $(".floativ-wrapper", $this).animate({height: o.height, width: o.width}, o.animate, function() {
-                        $(".floativ-wrapper", $this).mCustomScrollbar("update");
+                    floativWrapper.animate({height: o.height, width: o.width}, o.animate, function() {
+                        floativWrapper.mCustomScrollbar("update");
                     });
                 });
 
-                $(window).resize(function () {
-                    floativLoad();
-                    setTimeout(function () {
+                $(window).
+                    on('resize', function () {
+                        clearTimeout(resizeTimeout);
+                        resizeTimeout = setTimeout(function () {
+                            floativToggle();
+                        }, 500);
+                    }).
+                    on('scroll', function () {
                         floativToggle();
-                    }, 1000);
-                });
-
-                $(window).scroll(function () {
-                    floativToggle();
-                });
+                    });
 
                 setTimeout(function () {
                     $this.css({display: "none"});