LIL-160 - Фиксация шапки на всех страницах

apps/course/templates/course/lesson.html

@@ -83,7 +83,7 @@
     <div class="title">Задавайте вопросы:</div>
     <div class="questions">
       {% if user.is_authenticated %}
-      <div class="questions__form">
+      <form class="questions__form" method="post" action="{% url 'lessoncomment' lesson_id=lesson.id %}">
         <div class="questions__ava ava">
           <img class="ava__pic" src="{% static 'img/user.jpg' %}">
         </div>
@@ -93,7 +93,7 @@
           </div>
           <button class="questions__btn btn btn_light">ОТПРАВИТЬ</button>
         </div>
-      </div>
+      </form>
       {% else %}
       <div>Только зарегистрированные пользователи могут оставлять комментарии.</div>
       {% endif %}

web/build/css/app.css

@@ -443,6 +443,7 @@ b {
 .container {
   -ms-flex: 1 0 auto;
   flex: 1 0 auto;
+  margin-top: 100px;
 }
 
 .center {
@@ -698,10 +699,16 @@ a.btn {
 }
 
 .header {
-  position: relative;
+  position: fixed;
+  left: 0;
+  right: 0;
   z-index: 20;
 }
 
+.header--shadow {
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
+}
+
 .header__container {
   display: -ms-flexbox;
   display: flex;

web/build/js/app.js

@@ -26879,8 +26879,30 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
             'X-CSRFToken': (0, _jquery2.default)('meta[name="csrf-token"]').attr('content')
         }
     });
+
+    // Инициируем начальное состояние шапки
+    updateHeader();
+
+    (0, _jquery2.default)(window).on('scroll', function () {
+        updateHeader();
+    });
 });
 
+function updateHeader() {
+    var scrollOffset = (0, _jquery2.default)(window).scrollTop();
+    var headerElement = (0, _jquery2.default)('header');
+    if (scrollOffset >= 130) {
+        headerElement.css('background-color', '#fff');
+    } else {
+        headerElement.css('background-color', 'rgba(255, 255, 255, ' + scrollOffset / 130 + ')');
+    }
+    if (scrollOffset >= 150) {
+        headerElement.addClass('header--shadow');
+    } else {
+        headerElement.removeClass('header--shadow');
+    }
+}
+
 /***/ }),
 /* 128 */
 /***/ (function(module, exports, __webpack_require__) {

web/src/js/modules/common.js

@@ -9,5 +9,25 @@ $(document).ready(function () {
         }
     });
 
+    // Инициируем начальное состояние шапки
+    updateHeader();
 
-});
+    $(window).on('scroll', function () {
+        updateHeader();
+    });
+});
+
+function updateHeader() {
+    const scrollOffset = $(window).scrollTop();
+    const headerElement = $('header');
+    if (scrollOffset >= 130) {
+        headerElement.css('background-color', '#fff');
+    } else {
+        headerElement.css('background-color', `rgba(255, 255, 255, ${scrollOffset / 130})`);
+    }
+    if (scrollOffset >= 150) {
+        headerElement.addClass('header--shadow');
+    } else {
+        headerElement.removeClass('header--shadow');
+    }
+}

web/src/sass/_common.sass

@@ -81,6 +81,7 @@ b
 
 .container
   flex: 1 0 auto
+  margin-top: 100px
 
 .center
   width: 100%
@@ -278,8 +279,12 @@ a.btn
       width: 100%
 
 .header
-  position: relative
+  position: fixed
-  z-index: 20 
+  left: 0
+  right: 0
+  z-index: 20
+  &--shadow
+    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .08)
   &__container
     display: flex
     height: 100px