diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index 739b1d320f3c019ed562473c35e7933ce8f43f01..83a7c21d76b736823324531cb3b3a55cad67da04 100644
--- a/resources/assets/stylesheets/scss/courseware.scss
+++ b/resources/assets/stylesheets/scss/courseware.scss
@@ -203,6 +203,9 @@ r i b b o n
 $consum_ribbon_width: calc(100% - 58px);
 #course-courseware-index,
 #contents-courseware-courseware {
+    &.consume {
+        overflow: hidden;
+    }
     #layout_container {
         overflow-x: hidden;
         position: relative;
@@ -4784,4 +4787,4 @@ p u b l i c  l i n k s
 }
 /* * * * * * * * * * * * * * *
 e n d  p u b l i c  l i n k s 
-* * * * * * * * * * * * * * */
\ No newline at end of file
+* * * * * * * * * * * * * * */
diff --git a/resources/vue/components/courseware/CoursewareRibbon.vue b/resources/vue/components/courseware/CoursewareRibbon.vue
index 4b18c15fadbb153b3e66adf97913bd619606b1ac..72a3a50983664a4ab5226531896a13fdfce5bff1 100644
--- a/resources/vue/components/courseware/CoursewareRibbon.vue
+++ b/resources/vue/components/courseware/CoursewareRibbon.vue
@@ -106,9 +106,9 @@ export default {
         },
         handleScroll() {
             if (window.outerWidth > 767) {
-                this.stickyRibbon = window.scrollY > 130;
+                this.stickyRibbon = window.scrollY > 130 && !this.consumeMode;
             } else {
-                this.stickyRibbon = window.scrollY > 75;
+                this.stickyRibbon = window.scrollY > 75 && !this.consumeMode;
             }
         },
     },
@@ -132,6 +132,11 @@ export default {
         },
         consumeMode(newState) {
             this.$refs.consumeModeSwitch.focus();
+            if (newState) {
+                document.body.classList.add('consume');
+            } else {
+                document.body.classList.remove('consume');
+            }
         }
     }
 };