fix #3003 @1.5

diff --git a/resources/js/app.js b/resources/js/app.js
index 0af809c08f33889436bade2ba3f6ea85ada6f5d8..261a0ca6723040d18b3a0f4bdaa5f2938af63e28 100644 (file)
--- a/resources/js/app.js
+++ b/resources/js/app.js
@@ -129,10 +129,11 @@ window.addEventListener('scroll', function () {
 
 function checkScroll() {
     window.headerHeight = 134;
-    if (document.documentElement.scrollTop > 200) {
+    var scroll = document.documentElement.scrollTop;
+    if (scroll > 200) {
         document.getElementById('site-header').classList.add('minimized');
         window.headerHeight = 60;
-    } else {
+    } else if (scroll < 100) {
         document.getElementById('site-header').classList.remove('minimized');
     }
 }

diff --git a/resources/js/components/ProductsFilters.vue b/resources/js/components/ProductsFilters.vue
index 8d2ce38b65ad765d1ca7d172ecd82dbd00a29a88..6206000a8239f9b83e6b0335c51413dd18e79d86 100644 (file)
--- a/resources/js/components/ProductsFilters.vue
+++ b/resources/js/components/ProductsFilters.vue
@@ -3,7 +3,7 @@
     <div class="flex relative items-start sm:block">
 
         <!-- Filters column -->
-        <div class="products-filters-wrapper sticky sm:static top-0 mr-1v sm:mr-0 pt-4 whitespace-no-wrap">
+        <div class="products-filters-wrapper sticky sm:static top-60 mr-1v sm:mr-0 pt-4 whitespace-no-wrap">
 
             <!-- Filters panel -->
             <div class="bg-white p-4">
@@ -54,7 +54,7 @@
         <div class="products-grid flex-grow">
 
             <!-- Grid summary header -->
-            <div class="products-grid-summary sticky sm:static top-0 z-10 bg-grey-100 pt-4 pb-4 flex justify-between sm:block">
+            <div class="products-grid-summary sticky sm:static top-60 z-10 bg-grey-100 pt-4 pb-4 flex justify-between sm:block">
 
                 <!-- Active filters -->
                 <div class="products-grid-active-filters flex-grow text-sm">

diff --git a/resources/styles/components/header.styl b/resources/styles/components/header.styl
index 222ac1eeec9f703363222e9d1cd5db9301b444fc..6bbe279e170e89f3d7c400803961ee66330b2199 100644 (file)
--- a/resources/styles/components/header.styl
+++ b/resources/styles/components/header.styl
@@ -1,14 +1,14 @@
 #header-placeholder
   height 134px
+  .template-home &
+    background-color:theme('colors.navy')
 
 .site-header
   --transition-duration 500ms
-
-  @apply bg-navy text-white text-lg font-display font-medium antialiased
-  position fixed
+  @apply bg-navy text-white text-lg font-display font-medium antialiased sticky top-0
   transition height var(--transition-duration)
   width 100%
-  z-index 10
+  z-index 100
   height 134px
 
   .container

diff --git a/resources/views/partials/header.blade.php b/resources/views/partials/header.blade.php
index 347e8d6bfc3a9f369e7c380917e06e91db722514..4260612df144e1c7dd520d15f771d269b482c725 100644 (file)
--- a/resources/views/partials/header.blade.php
+++ b/resources/views/partials/header.blade.php
@@ -1,5 +1,4 @@
 @include('partials.nav-mobile')
-<div id="header-placeholder"></div>
 <header id="site-header" class="site-header">
     <div class="container flex items-center py-8 relative z-30">
 

diff --git a/tailwind.config.js b/tailwind.config.js
index 331b67a566ca531906ea85d485ea0fc36c136e97..304dfb0b0b0c120609f6036eabc64692340c801f 100644 (file)
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -42,6 +42,9 @@ module.exports = {
             padding: {
                 '100p': '100%', // Used for proportional padding to make a square
                 '25p':'25%',
+            },
+            inset:{
+                '60':'60px'
             }
         },
     },