fixed the scroll behavior in the header

2026-04-15 12:21:31 +02:00
parent e77fb4a1f2
commit bc83366c9e
5 changed files with 111 additions and 17 deletions
@@ -16,4 +16,23 @@
 body {
  background-color: var(--background);
  color: var(--foreground);
+}
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+}
+
+::-webkit-scrollbar {
+  display: none;
+  width: 0px;
+  background: transparent;
+}
+
+* {
+  scrollbar-width: none;
+  -ms-overflow-style: none;
 }
@@ -1,7 +1,10 @@
 import type { Metadata } from "next";
 import { Playfair_Display, Inter } from "next/font/google";
+
 import "./globals.css";
+
 import Header from "@/components/layout/Header";
+import CustomScrollArea from "@/components/layout/CustomScrollArea";

 const playfairDisplay = Playfair_Display({
 	variable: "--font-playfair",
@@ -24,10 +27,21 @@ export default function RootLayout({
 	children: React.ReactNode;
 }>) {
 	return (
-		<html lang="fr" className={`${playfairDisplay.variable} ${inter.variable} bg-brand-beige m-2.75 overflow-auto antialiased`}>
-			<body className="min-h-screen flex flex-col bg-brand-beige text-brand-brown">
-				<Header />
-				{children}
+		<html lang="fr" className={`${playfairDisplay.variable} ${inter.variable} bg-brand-beige overflow-hidden antialiased`}>
+			
+			<body className="h-screen w-screen bg-brand-beige text-brand-brown flex flex-col overflow-hidden">
+				<div className="sticky top-0 z-50 bg-brand-beige w-full px-2.75 pt-2.75">
+					<Header />
+				</div>
+				{/* Scrolling bloc */}
+				<CustomScrollArea>
+					
+					
+					<main className="px-2.75 pb-2.75">
+						{children}
+					</main>
+				</CustomScrollArea>
+
 			</body>
 		</html>
 	);
@@ -2,7 +2,7 @@ import HeroSection from "@/components/sections/HeroSection";

 export default function Home() {
 	return (
-		<main className=" bg-brand-beige text-brand-black flex items-center justify-center">
+		<main className=" bg-brand-beige text-brand-black flex flex-col items-center justify-center">
 			<HeroSection />
 		</main>
 	);