X-Git-Url: https://git.mxchange.org/?a=blobdiff_plain;f=view%2Ftheme%2Ffrio%2Fjs%2Ftheme.js;h=0329ae6c82cb16a287a6238b2d007a41f9dfbfe0;hb=2b161108fe6552ef2effb7b300553f0242b2e49e;hp=62c45b3da2ca97cfc481271549c5370d5f679c87;hpb=0ffe426ff1bf63cf5220c4d0994071c33b3a95eb;p=friendica.git

diff --git a/view/theme/frio/js/theme.js b/view/theme/frio/js/theme.js
index 62c45b3da2..0329ae6c82 100644
--- a/view/theme/frio/js/theme.js
+++ b/view/theme/frio/js/theme.js
@@ -317,19 +317,42 @@ $(document).ready(function(){
 	});
 
 	/*
-	 * Sticky aside on page scroll, only on desktop
+	 * Sticky aside on page scroll
+	 * We enable the sticky aside only when window is wider than
+	 * 976px - which is the maximum width where the aside is shown in
+	 * mobile style - because on chrome-based browsers (desktop and
+	 * android) the sticky plugin in mobile style causes the browser to
+	 * scroll back to top the main content, making it impossible
+	 * to navigate.
+	 * A side effect is that the sitky aside isn't really responsive,
+	 * since is enabled or not at page loading time.
 	 */
 	if ($(window).width() > 976) {
 		$("aside").stick_in_parent({
 			offset_top: 100, // px, header + tab bar + spacing
 			recalc_every: 10
 		});
-		// recalculate sticky aside on clicks.
+		// recalculate sticky aside on clicks on <a> elements
 		// this handle height changes on expanding submenus
-		$("aside").on("click", function(){
+		$("aside").on("click", "a", function(){
 			$(document.body).trigger("sticky_kit:recalc");
 		});
 	}
+
+	/*
+	 * Add or remove "aside-out" class to body tag
+	 * when the mobile aside is shown or hidden.
+	 * The class is used in css to disable scroll in page when the aside
+	 * is shown.
+	 */
+	$("aside")
+		.on("shown.bs.offcanvas", function() {
+			$("body").addClass("aside-out");
+		})
+		.on("hidden.bs.offcanvas", function() {
+			$("body").removeClass("aside-out");
+		});
+
 });
 
 function openClose(theID) {