diff --git a/pages/index.tsx b/pages/index.tsx
index 856e9c63d..a520043d5 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -19,6 +19,8 @@ export default function Home() {
}>Button
+
+ Lorem ipsum dolor sit, amet consectetur adipisicing elit. Odit repellendus unde ad, deleniti et eligendi libero accusamus, suscipit necessitatibus cumque quasi. Harum sed excepturi obcaecati totam culpa earum modi hic nam neque voluptas, quaerat magnam nemo perspiciatis placeat accusamus nisi. Commodi neque hic nostrum? In voluptate ipsam aperiam perspiciatis fuga placeat quas asperiores! Fugit aspernatur dolore corporis. Aliquam, iste consequuntur sit tenetur autem iure vero aspernatur ad sint earum illo reprehenderit asperiores recusandae dicta ipsam unde ab veniam a similique? Nostrum iure et, officiis ipsum quo odio necessitatibus consequatur. Ad eligendi cumque quae architecto. Impedit odit ex atque at nostrum natus cumque modi unde quibusdam, asperiores illum nam, debitis est soluta. Hic maiores nostrum ab rerum voluptatum dolor maxime impedit in? Culpa beatae illum sapiente illo dolore natus voluptatem ipsum recusandae asperiores laudantium deserunt, ipsa itaque accusamus, commodi in quos sint fuga quam error minima molestiae distinctio, incidunt doloremque quidem. Iste omnis velit cupiditate eaque doloribus impedit quasi, alias iusto a, exercitationem perspiciatis ad ut libero ex laudantium aliquid porro aut autem nostrum, voluptas corrupti! Ipsa in fugiat debitis, reprehenderit, esse iusto eius sit modi nobis cumque vero rem! Sequi, ex nulla dolores architecto illum aut doloribus, quibusdam eligendi est ut earum quas perspiciatis unde ad. Beatae aspernatur quisquam laudantium asperiores vel veniam, recusandae ut tempora eveniet fugit consequatur repudiandae perspiciatis voluptatem tenetur placeat enim quibusdam consectetur minus cupiditate laborum? Et omnis quidem, ex excepturi delectus hic repudiandae, harum ratione neque tenetur praesentium ab officiis consequatur eveniet similique ducimus maiores in exercitationem magnam expedita iste laudantium doloremque! Repellat soluta quo quos officia doloremque quod quisquam maxime vel assumenda sint recusandae, aliquid, at delectus cumque ad placeat a ducimus obcaecati eos eveniet minima. Cumque quod quidem minima quibusdam dolores odit alias ipsa eos ad, dolor accusantium repellat beatae eveniet amet corrupti aut recusandae corporis officiis commodi nulla ut vel repellendus? Numquam dolorem tempore tenetur corrupti est dolorum quisquam, eius suscipit. Itaque harum similique obcaecati dolores, vero odio alias numquam laborum accusamus, facilis sint quas commodi quo iste, saepe odit corrupti animi error praesentium molestiae. Soluta cumque sed, laborum perferendis quasi optio possimus consequatur! Ducimus modi quo, natus inventore numquam soluta exercitationem, accusamus, impedit voluptatum ex nostrum placeat consequatur voluptatem vel quam dolore nobis similique quidem sit cupiditate nulla. Tenetur architecto cumque nisi cum vitae. Voluptatibus deserunt velit tempore ea ipsam a magnam neque eius unde autem cupiditate quas qui dolor officia aliquid illo deleniti eveniet, asperiores blanditiis, fugiat non minima, quaerat obcaecati. Voluptatem eos totam quos repellendus cum nemo, exercitationem repudiandae labore amet earum quaerat ut. Fuga unde illo expedita nemo commodi eum quos eaque sit harum animi labore quidem, beatae necessitatibus, laudantium quibusdam doloribus asperiores, sunt soluta! Minus tempora consequuntur labore quidem cumque fugiat ipsum in sed, necessitatibus saepe, rem laboriosam tempore! Minus consequuntur assumenda deserunt dignissimos maiores impedit eligendi, repudiandae architecto possimus obcaecati totam voluptatem doloremque cumque similique voluptate velit repellendus ipsam porro quae reiciendis ut tempora distinctio nemo. Quia hic laborum facere beatae officia rerum perspiciatis accusantium, iusto eius illum blanditiis delectus eveniet quibusdam eligendi eos sequi? Facilis quidem expedita, voluptate perferendis sit pariatur vitae! Amet, aliquam provident corporis dolore voluptate omnis, reiciendis perspiciatis dignissimos perferendis, porro voluptatum. Dignissimos cum nobis eligendi quisquam reiciendis? Qui distinctio quod placeat accusantium, hic vitae quaerat dicta fugit iure eum saepe rem, recusandae neque ea corrupti soluta. Earum quas laborum nulla in aliquam repellat voluptates minima magnam, eius minus. Dicta, in nobis assumenda alias velit fugiat! Enim mollitia et accusantium omnis inventore. Nisi sunt iure harum, velit excepturi ex sit eveniet alias voluptates laudantium facilis ipsam atque enim molestiae perferendis corrupti sapiente cumque, repudiandae non, rerum magnam sequi voluptate voluptatibus consectetur. Est animi illo magnam, vero dolores vel maxime laboriosam recusandae amet nemo! Corporis neque assumenda ullam officia nulla! Dolorum minus dicta tenetur ex, nemo dolore quae quibusdam quos enim reiciendis repellendus aliquam neque, vero voluptatem exercitationem eaque libero deleniti nihil saepe aperiam recusandae, natus laborum doloribus consectetur. Quasi vero sed, nesciunt adipisci distinctio sint asperiores officiis cumque dolore suscipit quos quibusdam illum eos atque incidunt esse quis blanditiis dolorem ipsam possimus in. Maxime vitae dolor sunt dolore accusantium! Debitis quisquam fuga sapiente eveniet ab, tempora nisi, asperiores accusamus aut laborum, error iusto illum unde! Perferendis, eveniet voluptatum architecto eos, atque veritatis eaque quia nam laudantium voluptate necessitatibus consequatur dolorum placeat quibusdam cum. Velit quaerat assumenda reprehenderit earum maxime sunt, quis ad ab rem facere, totam excepturi doloribus sequi aliquam nulla. Ipsam at beatae sunt placeat veniam dignissimos tenetur sed quod, laborum commodi ad voluptate distinctio, vel delectus! Iusto, voluptate laboriosam saepe laudantium libero similique deserunt. Tenetur maiores enim, vitae cum consectetur autem quidem? Ratione expedita error rerum aliquid aspernatur nisi voluptas veniam quibusdam. Debitis nobis voluptatem omnis quidem neque aperiam nesciunt nemo, similique consequatur eum quaerat consectetur. Eius nesciunt officia inventore ducimus corporis, reiciendis amet similique cum corrupti consequatur atque provident quam hic assumenda, doloribus impedit suscipit obcaecati fuga. Tempora iure fugit modi perspiciatis autem corporis mollitia atque nam iusto totam ipsa possimus molestias inventore, neque exercitationem ex officiis, quisquam dolorem id nostrum eaque eum quaerat. Culpa labore laudantium excepturi beatae, autem quos dignissimos tempore molestias veniam accusantium dolore eum esse, numquam officiis incidunt nam magnam! Necessitatibus in dolore repudiandae. Iusto architecto tempore assumenda tempora dolores obcaecati hic debitis nulla vitae, odit, dolorem corporis saepe, officia non porro explicabo! Consequuntur porro totam cupiditate sequi, officiis nihil dolorem consequatur. Consequatur, quibusdam maiores eos cupiditate reprehenderit consequuntur labore sed dicta suscipit cum dolorem consectetur quas dolores unde hic eaque eligendi sapiente excepturi incidunt deserunt molestiae vitae architecto expedita. Dolores voluptates quidem maiores aliquam rem deleniti obcaecati sint deserunt illo quis, quae eaque incidunt officiis ducimus ipsam soluta, sapiente omnis odio aut! Aliquid nesciunt tempora et accusantium cumque explicabo, aut impedit, voluptas iste, pariatur sint. Veniam, praesentium quisquam id molestiae est ut quo ullam fugit cum expedita maxime et illo. Quis fuga necessitatibus incidunt, distinctio exercitationem sit tenetur sed voluptates voluptas reiciendis tempora eveniet qui cupiditate voluptatem aliquam rerum dolores alias aspernatur optio! Sit fugit, alias ducimus porro magni sunt aspernatur natus quod quo laboriosam, illo quisquam rerum eum. Incidunt, quia molestiae. Sapiente, suscipit amet voluptate facere fugit excepturi officia nostrum incidunt! Fugiat quis corrupti assumenda dolor fuga explicabo exercitationem obcaecati, voluptatum, a impedit repellat asperiores quisquam? Ullam dolor perspiciatis libero tempore voluptatem nihil ipsam dolorum molestias reprehenderit, placeat nostrum id accusantium necessitatibus quod sed laudantium cum mollitia accusamus? Odit iste amet nobis consequuntur? Eveniet, ad harum earum quod molestias commodi, repudiandae, esse ratione ullam dolore explicabo deleniti. Placeat, architecto harum. Sint ullam quam in sunt ducimus obcaecati, vel corporis modi dolor voluptates facilis aliquid quibusdam quidem perspiciatis recusandae illum soluta est consectetur repellat nulla consequatur, aspernatur, odio amet repellendus. Provident numquam consequatur id laboriosam sapiente, laudantium nemo quia, a repudiandae, odio tempore ullam? Odio at ratione, vitae officiis placeat magni voluptatum ullam quas voluptatem molestias iste illum temporibus in eum ipsa reprehenderit commodi voluptate praesentium repellendus quos. Ipsa deserunt officiis eaque et cumque molestias odit eius libero maxime, reiciendis, nihil tempora omnis porro quo enim quae? Expedita in ipsa nobis quae dolorum ipsam magni sunt at odio quia, molestias dignissimos dolore vero iure autem. Culpa, architecto eos! Esse itaque voluptate quod quasi natus qui eveniet expedita ipsam! Qui eaque explicabo molestiae debitis pariatur rerum nisi fuga exercitationem. Recusandae quae voluptas, consectetur veritatis libero ab autem quod cum architecto magni incidunt totam esse temporibus perspiciatis non, sunt nulla! A perspiciatis, quam iure architecto adipisci natus fuga dignissimos beatae, ut nam aspernatur illum incidunt, ad deleniti voluptatum. Vitae ullam sit libero, minus quo cupiditate, ratione facere saepe numquam expedita beatae corrupti officiis quibusdam minima. Temporibus, excepturi possimus aliquam sit optio ea voluptas. Maiores saepe minus delectus quam temporibus quisquam at ex quae harum veritatis placeat dolorum voluptate deleniti praesentium, consectetur nulla neque libero mollitia odit eveniet. Dolorem ipsum dignissimos quod facilis modi obcaecati adipisci sed natus voluptate odit est, eveniet doloribus facere dolore pariatur amet quibusdam saepe architecto sapiente et nulla! Distinctio voluptatem, dolore earum veritatis consequuntur provident soluta, nam nemo, aliquam dolorem cum accusamus at labore fugit perferendis ducimus magnam! Fuga, impedit minus delectus nulla asperiores labore minima sit, magni quos, incidunt similique alias necessitatibus explicabo! Vitae ullam velit porro, laborum distinctio expedita odio maxime numquam. Repudiandae dignissimos dolore voluptatibus ea labore facilis blanditiis quam rem facere similique nihil fugit iste eligendi neque consectetur accusantium quis delectus laborum, molestias possimus doloribus in at. Voluptatibus quae quas repudiandae nesciunt ex omnis quod, accusantium quaerat facere optio nisi minima delectus suscipit officia error voluptas consequuntur vero. Quod dicta dolore tenetur esse dolorem incidunt ab in maiores quisquam ipsa sunt, eligendi vitae cum qui repellat, illo consequatur eaque alias porro beatae rem exercitationem. Voluptatum placeat autem ratione fugiat voluptatem nostrum praesentium soluta saepe qui cum. Iste velit dolorem iure debitis nihil porro nobis doloribus, autem natus ducimus asperiores suscipit id ipsum impedit assumenda qui error cum et dolor fuga? Assumenda commodi iste magnam alias, quidem autem inventore officia fugit incidunt! Dolorem minus aliquam blanditiis praesentium sequi amet, hic vel repudiandae? Voluptates nesciunt repellendus sapiente ab ex mollitia, quo harum facilis similique praesentium dolorum animi magnam error ipsa quia cupiditate sit, aliquid voluptas saepe, id odio debitis atque. Numquam nesciunt facere commodi harum deserunt, placeat repellendus a officiis non eum voluptatum dignissimos corrupti rerum. Recusandae, adipisci, modi non doloribus quaerat iusto enim ut reiciendis in dolorem provident eaque aperiam perspiciatis odio tempore quidem numquam officia molestiae voluptatibus soluta suscipit ipsa. Aperiam eaque unde fugit, veritatis maiores molestiae nesciunt officiis. Illum fuga voluptatum, quam tempora consequuntur eum. Qui vero, quae accusantium vel dicta veritatis eos autem dolor accusamus quia incidunt deserunt ut placeat suscipit distinctio ex! Quisquam modi mollitia voluptas quaerat dicta iusto ratione corporis, alias in neque! Nobis deleniti optio, dolores, quas consequatur earum ab distinctio dolor facere explicabo aperiam magnam ex incidunt praesentium pariatur ipsa vero, cupiditate eveniet. Repellat vel nostrum minima voluptatum illum eveniet quis vero fugit obcaecati nemo neque aperiam dolores accusantium labore distinctio, consequuntur facilis vitae. Quam architecto cupiditate, molestiae blanditiis, quis ratione officiis odit totam inventore aliquam eaque odio, explicabo nisi laborum ipsum. Nisi minus aliquid tenetur pariatur omnis numquam consequatur ullam repudiandae placeat? Delectus atque accusantium corrupti laborum praesentium quisquam saepe expedita reiciendis, laudantium magni doloremque amet facilis tempore error aperiam in perferendis, sunt voluptates aliquam reprehenderit, consequuntur iusto facere. Totam beatae quisquam molestiae autem quasi commodi alias perferendis magni ipsum ipsa cumque odio voluptatibus cupiditate adipisci vel ad pariatur, non quo tempora dicta fugit voluptates veritatis qui praesentium. Repellendus non iure eveniet sed assumenda optio alias aspernatur sapiente quia dolorem ullam necessitatibus excepturi placeat iste nostrum, sunt consequatur qui porro facilis! Numquam et accusantium enim reprehenderit! Iusto qui tenetur, repellendus non dolor enim voluptas cupiditate adipisci omnis quidem necessitatibus ipsum doloremque delectus, ratione consectetur dolorum voluptatum nihil quos! Cumque fugit iusto eos numquam vitae consectetur facere quae doloribus. Molestiae facilis qui officiis pariatur aliquid molestias fuga provident delectus. Porro iusto natus velit reiciendis ut, itaque alias repudiandae est cumque deserunt, officiis commodi temporibus earum aperiam voluptatum. Minus impedit recusandae qui nihil harum commodi, sequi eius aut doloribus modi nisi aperiam quam dolorem natus. Cupiditate corporis quisquam deleniti consectetur eligendi aliquid quas porro. Eius facere recusandae quae fugit, rerum libero, dolorem doloribus fuga rem voluptas magnam, alias ullam quasi molestias aut! Autem et unde est dolor exercitationem labore! Maxime dignissimos ratione quae repudiandae nobis temporibus excepturi eveniet incidunt repellat, nesciunt aliquam dolor perspiciatis dolores dolore est repellendus qui voluptates! Delectus nam sapiente officia assumenda esse eligendi, deleniti animi recusandae reprehenderit qui accusantium numquam odio repudiandae facere nesciunt, optio maxime porro dolore repellendus. Explicabo iure rem nisi nulla reiciendis distinctio cum odio! Optio dolor animi iusto repellendus id expedita repudiandae commodi illum eos excepturi facilis rem, modi hic magni, ipsa tempore vel velit doloribus obcaecati autem deserunt quis earum explicabo atque. Repellendus quas optio dolor molestiae! Qui nobis maiores, quas beatae quibusdam, deserunt temporibus numquam soluta totam assumenda quidem labore aut error cumque aliquam dicta sapiente, porro impedit culpa in et sint obcaecati.
)
}
diff --git a/src/components/common/Header/Header.module.scss b/src/components/common/Header/Header.module.scss
index 9f92fc918..32392dffc 100644
--- a/src/components/common/Header/Header.module.scss
+++ b/src/components/common/Header/Header.module.scss
@@ -1,11 +1,11 @@
@import "../../../styles/utilities";
.header {
- @apply sticky bg-white;
+ @apply sticky bg-white shadow-md;
top: 0;
z-index: 9999;
- @screen md {
- padding-bottom: 1.6rem;
+ &.full {
+ @apply shadow-none;
}
.menu {
padding-left: 3.2rem;
diff --git a/src/components/common/Header/Header.tsx b/src/components/common/Header/Header.tsx
index beb408522..dfce58b57 100644
--- a/src/components/common/Header/Header.tsx
+++ b/src/components/common/Header/Header.tsx
@@ -1,4 +1,6 @@
-import React, { memo } from 'react'
+import classNames from 'classnames'
+import React, { memo, useEffect, useState } from 'react'
+import { isMobile } from 'src/utils/funtion.utils'
import HeaderHighLight from './components/HeaderHighLight/HeaderHighLight'
import HeaderMenu from './components/HeaderMenu/HeaderMenu'
import HeaderSubMenu from './components/HeaderSubMenu/HeaderSubMenu'
@@ -11,13 +13,31 @@ interface Props {
}
const Header = memo(({ }: Props) => {
+ const [isFullHeader, setIsFullHeader] = useState(true)
+
+ useEffect(() => {
+ window.addEventListener('scroll', handleScroll)
+ return () => {
+ window.removeEventListener('scroll', handleScroll)
+ }
+ }, [])
+
+ const handleScroll = () => {
+ if (!isMobile()) {
+ if (window.scrollY === 0) {
+ setIsFullHeader(true)
+ } else {
+ setIsFullHeader(false)
+ }
+ }
+ }
return (
<>
-
-
+
+