css fix mobile menu, hide banner btn

project/templates/blocks/baner.html

@@ -2,5 +2,6 @@
 <div class="banner" style="background-image: url({{ baner.image.url }});">
   <span class="banner__text">{{ baner.text }}</span>
   <a href="{{ baner.url }}" class="banner__link">{{ baner.button_text }}</a>
+  <a href="#" class="banner__hide" data-banner="{{baner.id}}">Скрыть баннер</a>
 </div>
 {% endif %}

web/src/js/modules/common.js

@@ -23,6 +23,23 @@ $(document).ready(function () {
     $(window).on('scroll', function () {
         updateHeader();
     });
+
+    $(document).on('click', '[data-banner]', function(e){
+       e.preventDefault();
+
+        $.ajax('/hide-banner/'+$(this).data('banner'), {
+                method: 'GET',
+            })
+            .done(function (data) {
+                if (data.success === true) {
+                    $('.banner').slideUp();
+                }
+            })
+            .fail(function (xhr) {
+                console.log('error', xhr);
+                $('.banner').slideUp();
+            })
+    });
 });
 
 function updateHeader() {
@@ -39,13 +56,15 @@ function updateHeader() {
         headerElement.removeClass('header--shadow');
     }
 
-    if(scrollOffset > 0) {
-        if(scrollOffset <= 140) {
-            headerElement.css('top', (140-scrollOffset)+'px');
+    if($('.banner').is(':visible')) {
+        if(scrollOffset > 0) {
+            if(scrollOffset <= 140) {
+                headerElement.css('top', (140-scrollOffset)+'px');
+            } else {
+                headerElement.css('top', '0px');
+            }
         } else {
-            headerElement.css('top', '0px');
+            headerElement.css('top', '');
         }
-    } else {
-        headerElement.css('top', '');
     }
 }

web/src/sass/_common.sass

@@ -552,6 +552,8 @@ a.btn
   &__menu,
   &__close
     display: none
+    +m
+      display: block
     .icon
       fill: $cl
   &__menu
@@ -3999,13 +4001,25 @@ a
   background-position: center;
   background-size: cover;
   &__text
-    //mix-blend-mode: difference
     font-size: 30px
     text-shadow: 0px 0px 3px rgba(0, 0, 0, 1)
   &__link
-    //mix-blend-mode: difference
     display: block
     color: #fff
     font-size: 20px
     text-shadow: 0px 0px 3px rgba(0, 0, 0, 1)
-    margin-top: 20px
+    margin-top: 20px
+    +m
+      margin-top: 0px
+  &__hide
+    position: absolute
+    right: 5px
+    top: 5px
+    display: block
+    color: #fff
+    text-shadow: 0px 0px 3px rgba(0, 0, 0, 1)
+    text-transform: uppercase
+    border-bottom: 1px dotted #fff
+    opacity: 0.3
+    +m
+      //margin-top: 0px