diff --git a/resources/assets/stylesheets/scss/courseware.scss b/resources/assets/stylesheets/scss/courseware.scss
index f429b6b00f3d55ab8ba951701de5211c9e56c98e..f6ede94d03da46ca0f660ab70477ff729660281a 100755
--- 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;
diff --git a/resources/vue/components/courseware/CoursewareRibbon.vue b/resources/vue/components/courseware/CoursewareRibbon.vue
index 60e4f0150cff6f77fb1f40ecce4416e4e5b04d8c..493a0461900d6e1acf1d10b4a5c6e918986c5f45 100755
--- 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');
+            }
         }
     }
 };