reduce lexique search on scroll

pages/lexique.vue

@@ -2,7 +2,7 @@
 	<main class="container">
 		<div class="rech-lexique row pb-3">
 			<div class="col-md-6 mx-auto">
-				<h2 class="text-center my-5 font-weight-light">{{ $t("lexique") }}</h2>
+				<h2 class="text-center font-weight-light">{{ $t("lexique") }}</h2>
 				<BtnSearch v-model="search" :help="$t('recherche.desc.lexicon')" />
 			</div>
 		</div>
@@ -120,6 +120,15 @@ export default {
 			return retour
 		}
 	},
+	beforeMount() {
+		window.addEventListener("scroll", function (e) {
+			if (window.scrollY > 20) {
+				$(".rech-lexique").addClass("reduced")
+			} else {
+				$(".rech-lexique").removeClass("reduced")
+			}
+		})
+	},
 	mounted() {
 		$nuxt.$emit("changeRoute", this.breadcrumb)
 	}
@@ -131,7 +140,17 @@ export default {
 	position: sticky;
 	top: var(--paddingTop);
 	background: var(--background-color-primary);
+
+	h2 {
+		margin: 3rem 0;
+		transition: margin 0.3s ease-in-out;
+	}
+
+	&.reduced h2 {
+		margin: 0.5rem 0;
+	}
 }
+
 th {
 	min-width: 200px;
 }