diff --git a/frappe/public/js/frappe/ui/page.js b/frappe/public/js/frappe/ui/page.js
index 91a2390cdb..e3134b1f38 100644
--- a/frappe/public/js/frappe/ui/page.js
+++ b/frappe/public/js/frappe/ui/page.js
@@ -47,13 +47,17 @@ frappe.ui.Page = class Page {
 	}
 
 	setup_scroll_handler() {
-		window.addEventListener('scroll', () => {
-			if (document.documentElement.scrollTop) {
-				$('.page-head').toggleClass('drop-shadow', true);
+		let last_scroll = 0;
+		window.addEventListener('scroll', frappe.utils.throttle(() => {
+			$('.page-head').toggleClass('drop-shadow', !!document.documentElement.scrollTop);
+			let current_scroll = document.documentElement.scrollTop;
+			if (current_scroll > 0 && last_scroll <= current_scroll) {
+				$('.page-head').css("top", "-15px");
 			} else {
-				$('.page-head').removeClass('drop-shadow');
+				$('.page-head').css("top", "var(--navbar-height)");
 			}
-		});
+			last_scroll = current_scroll;
+		}), 500);
 	}
 
 	get_empty_state(title, message, primary_action) {
diff --git a/frappe/public/scss/desk/page.scss b/frappe/public/scss/desk/page.scss
index f0a9152cfb..2df349cb6c 100644
--- a/frappe/public/scss/desk/page.scss
+++ b/frappe/public/scss/desk/page.scss
@@ -88,6 +88,7 @@
 	top: var(--navbar-height);
 	background: var(--bg-color);
 	margin-bottom: 5px;
+	transition: 0.5s top;
 	.page-head-content {
 		height: var(--page-head-height);
 	}