diff --git a/packages/Webkul/Admin/src/Resources/assets/js/app.js b/packages/Webkul/Admin/src/Resources/assets/js/app.js
index 3c2238a80..ceb6fe298 100755
--- a/packages/Webkul/Admin/src/Resources/assets/js/app.js
+++ b/packages/Webkul/Admin/src/Resources/assets/js/app.js
@@ -8,83 +8,72 @@ Vue.prototype.$http = axios
 
 window.eventBus = new Vue();
 
-window.onload = function () {
-    $(document).ready(function() {
-        navbarLeftCssTop = parseInt($('.navbar-left').css("top"));
-        windowHeight = $(window).height();
-        menubarHeight = $('ul.menubar').height();
-        documentHeight = $(document).height();
-        contentHeight = $('.content').height();
-        innerSectionHeight = $('.inner-section').height();
-        asideNavHeight = $('.aside-nav').height();
-        pageContentHeight = $('.page-content').height();
-        accordianHeight = $('.accordian').height();
+window.addEventListener('DOMContentLoaded', function() {
+    moveDown = 60;
+    moveUp =  -60;
+    count = 0;
+    countKeyUp = 0;
+    pageDown = 60;
+    pageUp = -60;
+    scroll = 0;
 
-        if (menubarHeight < windowHeight) {
-            differenceInHeight = windowHeight - menubarHeight;
-        } else {
-            differenceInHeight = menubarHeight - windowHeight;
-        }
+    listLastElement = $('.menubar li:last-child').offset();
+    lastElementOfNavBar = listLastElement.top;
 
-        if(pageContentHeight <= innerSectionHeight - 60) {
-            $('.navbar-left').css("position","absolute");
-            // $('.content').css({"position": "fixed", "width": "65%"});
-            // $('.content-wrapper').css({"position": "sticky", "top": "60px"});
-        }
-        else {
-            $('.accordian-header').on('click',function(event) {
-                pageContentHeightOnAccordianClick = $('.page-content').height();
+    navbarTop = $('.navbar-left').css("top");
+    menuTopValue = $('.navbar-left').css('top');
+    menubarTopValue = menuTopValue;
 
-                if(pageContentHeightOnAccordianClick <= innerSectionHeight) {
-                    $('.navbar-left').css("position","absolute");
-                    $('.content').css("position","fixed");
-                    $('.content-wrapper').css({"position": "sticky", "top": "60px"});
-                }
-            });
-        }
+    documentHeight = $(document).height();
+    menubarHeight = $('ul.menubar').height();
+    navbarHeight = $('.navbar-left').height();
+    windowHeight = $(window).height();
+    contentHeight = $('.content').height();
+    innerSectionHeight = $('.inner-section').height();
+    gridHeight = $('.grid-container').height();
+    pageContentHeight = $('.page-content').height();
 
-        scrollTopWhenWindowLoaded = $(document).scrollTop();
+    if (menubarHeight <= windowHeight) {
+        differenceInHeight = windowHeight - menubarHeight;
+    } else {
+        differenceInHeight = menubarHeight - windowHeight;
+    }
+
+    if (menubarHeight > windowHeight) {
+        document.addEventListener("keydown", function(event) {
+            if ((event.keyCode == 38) && count <= 0) {
+                count = count + moveDown;
+
+                $('.navbar-left').css("top", count + "px");
+            } else if ((event.keyCode == 40) && count >= -differenceInHeight) {
+                count = count + moveUp;
+
+                $('.navbar-left').css("top", count + "px");
+            } else if ((event.keyCode == 33) && countKeyUp <= 0) {
+                countKeyUp = countKeyUp + pageDown;
+
+                $('.navbar-left').css("top", countKeyUp + "px");
+            } else if ((event.keyCode == 34) && countKeyUp >= -differenceInHeight) {
+                countKeyUp = countKeyUp + pageUp;
+
+                $('.navbar-left').css("top", countKeyUp + "px");
+            } else {
+                 $('.navbar-left').css("position", "fixed");
+            }
+        });
+
+        $("body").css({minHeight: $(".menubar").outerHeight() + 100 + "px"});
+
+        window.addEventListener('scroll', function() {
+            documentScrollWhenScrolled = $(document).scrollTop();
 
-        if (menubarHeight > documentHeight && menubarHeight > windowHeight) {
-            $(document).scroll(function() {
-                documentScrollWhenScrolled = $(document).scrollTop();
                 if (documentScrollWhenScrolled <= differenceInHeight + 200) {
-                    $('.navbar-left').css('top', documentScrollWhenScrolled + 60 + 'px');
-
+                    $('.navbar-left').css('top', -documentScrollWhenScrolled + 60 + 'px');
                     scrollTopValueWhenNavBarFixed = $(document).scrollTop();
                 }
-            });
-        } else if (menubarHeight < windowHeight) {
-            $('.navbar-left').css("position", "fixed");
-        } else if (menubarHeight < documentHeight) {
-            if (scrollTopWhenWindowLoaded > differenceInHeight) {
-                $('.navbar-left').css('top', -differenceInHeight + 'px');
-            }
-
-            if (menubarHeight > windowHeight) {
-                $(document).scroll(function() {
-                    documentScrollWhenScrolled = $(document).scrollTop();
-
-                    if (documentScrollWhenScrolled <= differenceInHeight + 200) {
-                        $('.navbar-left').css('top', -documentScrollWhenScrolled + 60 + 'px');
-
-                        scrollTopValueWhenNavBarFixed = $(document).scrollTop();
-                    }
-                });
-            } else if (menubarHeight < windowHeight) {
-                $(document).scroll(function() {
-                    documentScrollWhenScrolled = $(document).scrollTop();
-                    if (documentScrollWhenScrolled <= differenceInHeight + 70) {
-                        $('.navbar-left').css('top', -documentScrollWhenScrolled + 60 + 'px');
-
-                        scrollTopValueWhenNavBarFixed = $(document).scrollTop();
-                    }
-                });
-
-            }
-        }
-    });
-}
+        });
+    }
+});
 
 $(document).ready(function () {
     Vue.config.ignoredElements = [