JAVASCRIPT STEP 46 - Scroll

★ Scroll에 반응하는 화면설계

• window.onscroll : 스크롤을 컨트롤하는 함수
• HTML 코드 

<h1>Title</h1>

    <!-- (p>lorem100)*30 -->
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores aliquid, facilis maxime, tempora, fuga voluptatem perferendis excepturi vitae aliquam sunt enim minus facere harum in! Nulla, itaque ex corrupti qui omnis nostrum quo consequatur cupiditate cumque molestias aliquam assumenda totam ratione porro. Deleniti veritatis quam fugit nemo quibusdam, iusto quae ipsum temporibus dignissimos quia reiciendis exercitationem quis pariatur ipsam unde mollitia, dolore animi sunt tenetur, at iste ut. Magni at quia quaerat provident quod quae incidunt temporibus fugit sapiente! Fuga soluta, facere quod voluptas, perferendis nam ducimus quae exercitationem blanditiis reiciendis, facilis obcaecati minus delectus voluptates dignissimos commodi sapiente dolorum.</p>
    <p>Animi ipsa cupiditate cum voluptate nesciunt, quisquam tempore porro, a non quasi quae eveniet blanditiis expedita, praesentium et distinctio ea laborum quam voluptas. Quae voluptates provident ab porro enim dolor repudiandae molestiae maiores perspiciatis nihil blanditiis id cupiditate, similique sapiente nulla est perferendis! Repudiandae iure iste non. Ex adipisci, sequi ut laudantium nemo officiis quaerat molestias porro architecto, odio aperiam nisi reprehenderit quisquam maxime repellat laborum ipsam fugiat quas tempore vitae deserunt. Deserunt totam, est modi porro eaque dolores possimus ipsum eligendi atque ex accusantium sit in deleniti ea soluta quasi dolorum. Reprehenderit quasi enim numquam. Dolores magnam velit consequuntur!</p>
    <p>Optio quae nihil odit, vitae, laudantium ab suscipit velit totam cum, quidem perferendis! Ut, deserunt nam nostrum maxime adipisci architecto, nesciunt blanditiis consequuntur odit id pariatur eius, at molestiae molestias autem eaque alias! Impedit reiciendis dignissimos repellat similique in delectus deserunt laboriosam tempora odio placeat assumenda modi fuga ipsam, unde asperiores explicabo omnis obcaecati quaerat suscipit dicta ducimus repudiandae expedita. Expedita consectetur tenetur accusantium iusto ipsam quis dolorem odio, dignissimos dolore laudantium molestiae perferendis id sunt ratione aut minus illum explicabo voluptas, velit temporibus. Est libero, laboriosam quo doloremque doloribus quisquam sapiente, cupiditate illum commodi, quis in similique magni sed?</p>
    <p>Voluptatum minima at laboriosam autem. Ut magni quod, reprehenderit quisquam nisi minus totam molestias consequuntur suscipit esse impedit perspiciatis quae mollitia dolorum? Esse ipsum dolorum repellendus nam sed fugiat eum ab sunt tempore facere accusamus distinctio assumenda id sapiente nihil, veritatis itaque voluptatem vitae repellat eaque saepe similique architecto earum quis! Veritatis dolor recusandae perspiciatis deserunt provident officia quo quod facilis placeat. Tempore quod voluptas doloremque error nulla similique, iste aspernatur minima, ipsam nostrum provident architecto officia vero distinctio dolore ipsa corrupti omnis sunt? Delectus maiores sint vel eius magni error accusamus soluta praesentium explicabo pariatur nostrum provident, adipisci veritatis!</p>
    <p>Dolor incidunt quis et porro vero veniam fuga suscipit quos provident modi! Cupiditate nam odio et repellat quis facere qui totam magnam placeat est non veniam quas quia, animi iste minima nostrum, natus fugiat provident sequi tenetur exercitationem at. A quo similique ratione magni obcaecati fugiat voluptatibus voluptates, quasi corrupti inventore autem praesentium dolore dolor nesciunt nulla minima recusandae dolores assumenda minus corporis accusantium, perspiciatis soluta voluptatum. Itaque ex aliquid quaerat fugiat eligendi asperiores incidunt ut, nulla, magni officia in praesentium eum. Earum cumque qui provident mollitia excepturi consequuntur, sint soluta accusantium optio, enim officiis quisquam asperiores consectetur possimus odio.</p>
    <p>Nostrum enim quo minima distinctio explicabo tempora mollitia odio veniam natus rerum, odit qui at nihil, earum nesciunt dolor recusandae laborum eius eligendi eaque eveniet, illo officia? Pariatur deserunt ut, voluptates molestiae, perspiciatis quae ex impedit autem incidunt qui omnis nesciunt rem voluptate est unde ipsa nostrum vel quidem consequatur quisquam! Totam, eveniet, repellendus quis deleniti error consequatur vitae consequuntur sint fugiat aliquam delectus aliquid eligendi in soluta! In incidunt animi possimus aliquid quia minus consequuntur ut praesentium quaerat voluptates? Ad officiis alias ipsa perferendis, id tenetur, autem at amet optio quasi unde adipisci ea quam soluta ipsum delectus. Dolor?</p>
    <p>Quaerat iure quo sunt dignissimos repellendus, nisi molestiae delectus. Repellat ea a doloribus, voluptates quo qui libero animi rem. Molestias rem, minus recusandae impedit repudiandae in debitis et cumque odit eveniet, veritatis excepturi nobis atque dicta laudantium numquam deserunt nisi, fugit at eius quibusdam amet asperiores vero. Possimus iure deleniti atque eius earum dolores rem voluptatem facere error voluptas explicabo, deserunt laudantium praesentium aperiam reprehenderit quaerat, recusandae ipsum expedita repellat laborum voluptate exercitationem maiores alias pariatur. Expedita sequi officiis, ad maiores, provident saepe perferendis quia reprehenderit architecto ipsa tempora culpa laborum aspernatur hic numquam asperiores placeat cumque! Mollitia, ipsum sapiente!</p>
    <p>Distinctio mollitia deserunt, placeat reiciendis aliquam vero. Quidem, ex quae nesciunt ullam id placeat possimus dolor autem beatae quaerat sapiente at ut illum doloremque sint delectus non harum minima fuga laboriosam omnis neque. Voluptatibus, pariatur earum alias modi architecto eveniet, cumque magnam odit esse recusandae voluptatem explicabo ullam! Est alias amet minus adipisci. Sed sequi ea possimus incidunt temporibus saepe tempora amet provident quasi neque dolorum, autem est velit a esse illum doloremque! Blanditiis temporibus minus molestias labore magnam aliquid odit voluptas suscipit, laborum vel dolorem dolores in doloribus culpa repudiandae. Consectetur veritatis et ut sequi voluptates libero animi eaque.</p>
    <p>Nobis illum reprehenderit harum mollitia eius nesciunt incidunt suscipit libero beatae fuga? Repudiandae cupiditate aliquid minus reprehenderit obcaecati eum fugit, quis sed porro corporis enim animi, dicta, omnis beatae magnam eveniet ducimus a doloribus ea iure rerum! Perspiciatis tempore error officia quas exercitationem possimus voluptas quasi optio, facere atque voluptate iste tenetur voluptatum eaque! In porro blanditiis ipsam dolorem, cumque ex incidunt cupiditate eos repudiandae? Atque laudantium repellendus eos architecto. Provident sed atque veritatis voluptatum debitis! Laudantium distinctio cupiditate aliquid possimus eius alias, incidunt magnam assumenda aperiam quam qui sapiente sint dignissimos praesentium perspiciatis itaque. Cum incidunt quidem quibusdam atque.</p>
    <p>Laboriosam dignissimos modi perspiciatis repellendus quis veniam, laudantium, neque rem distinctio, velit quae necessitatibus provident quos! Debitis, accusamus assumenda nisi aliquam hic, ipsam error corporis, enim expedita est itaque minus nulla! Nihil architecto facere ducimus vero, placeat perspiciatis quasi, eaque tempora eum error culpa similique dolore deleniti beatae. Obcaecati officia labore commodi neque consequatur laboriosam, deserunt aperiam praesentium beatae voluptates iusto quod accusantium, eveniet consectetur ad excepturi aliquam illum a sint libero! Quidem omnis fuga, asperiores, consequuntur distinctio suscipit sequi nam velit maiores officia non impedit quibusdam beatae corporis ad cupiditate deleniti! Est optio debitis neque quod enim facere repudiandae?</p>
    <p>Sed nostrum similique, dolores iure tempora modi! Dolorem repellat fuga reprehenderit inventore aliquam facilis eius voluptatum illum porro non, ex consectetur et harum tempora ratione? Voluptates nam architecto eos pariatur mollitia rem nemo, quaerat ab numquam dolorum accusantium sequi molestiae facere modi! Omnis saepe eligendi, quibusdam, reprehenderit dolores doloribus assumenda quos necessitatibus natus atque cupiditate unde fuga dignissimos illum esse quidem eius incidunt est! Quo suscipit dolorem, vel dignissimos perferendis temporibus modi ipsum iure, accusantium doloribus et odit ratione nemo ut error minus, quia molestiae sit facilis deleniti eius voluptatum. Ab tempore cum corporis quas consectetur. Facilis voluptate eaque tempora.</p>
    <p>Sed laborum vel excepturi, vitae voluptas sapiente fuga unde aperiam, enim recusandae, quaerat reiciendis ad. Dolorem doloribus, aspernatur dicta tempore et sit doloremque quibusdam nesciunt. Corporis voluptatum dignissimos doloribus, deserunt iste ad amet quo praesentium sit reiciendis necessitatibus laboriosam alias sed libero optio possimus officiis porro earum veniam, nisi quod ab. Magni quasi iste sequi eveniet iure quam ab, ducimus doloribus aut similique nostrum dignissimos numquam necessitatibus nihil dolor nisi aliquam laudantium ratione vitae. Consectetur ad tempore iste numquam neque eligendi? Non quibusdam minima ea accusamus dicta assumenda temporibus hic veniam ab eligendi cumque iure corporis facilis eveniet, repellat quod?</p>
    <p>Exercitationem consectetur quaerat ratione iusto nesciunt praesentium magnam, laboriosam numquam minima assumenda earum quam sint animi odit ipsa fugiat. Accusantium consequuntur reprehenderit eveniet a iste quaerat totam beatae nam, veritatis similique odio repudiandae doloribus ipsam perspiciatis voluptatum alias pariatur aliquid blanditiis deserunt? In ad rem, sint commodi ducimus distinctio eaque recusandae, cum optio inventore quos maiores repudiandae? Eius sint error doloremque nam mollitia, porro explicabo saepe sed eveniet omnis optio praesentium ipsam excepturi quaerat provident dolorum alias dolorem! Quae tempore modi iure voluptatum assumenda nobis esse inventore in perferendis dolorum? Quas veritatis consectetur aut ex facilis ad ullam blanditiis deserunt.</p>
    <p>Corporis impedit officiis nesciunt amet ut iusto nulla tempora ea quia at eius, perspiciatis dicta, recusandae ex sed, doloremque quod architecto totam ab veniam in! Doloremque quae facere excepturi totam sint? Amet expedita vel quia, error labore accusantium omnis quam, commodi in eveniet quae animi exercitationem. Dolore ipsam autem accusamus dolores sapiente, eius nobis suscipit quo iusto aliquid voluptate voluptatibus consequatur quidem minima dolorum, quia porro quisquam recusandae neque ipsum debitis saepe molestiae nisi soluta. Libero itaque quasi eum! Quam enim sit delectus expedita in nobis, quae harum. Illo soluta dolores non suscipit magnam quisquam cumque sint iusto tempore alias?</p>
    <p>Velit laborum ipsa excepturi suscipit quibusdam at, dolores hic quas accusamus explicabo quo eos officiis beatae totam inventore illum nulla, blanditiis ratione! Aperiam facere perferendis saepe omnis tempore optio? Libero recusandae ipsa, soluta excepturi assumenda ab quaerat praesentium vero harum, ipsum tenetur et error minus, maiores voluptas laboriosam totam rem corrupti facilis. Saepe a neque praesentium quas. Praesentium blanditiis, facere, iste nulla autem expedita dolorum necessitatibus sit laboriosam fugit ullam debitis architecto doloribus temporibus provident eius exercitationem. Quam reiciendis fugit iusto recusandae nihil ullam corporis necessitatibus dolore, dolor excepturi praesentium quibusdam similique et ad vel possimus sunt sit quidem pariatur!</p>
    <p>Saepe laborum voluptate, eligendi facere error nam officiis sed sunt. Explicabo iusto possimus deleniti. Assumenda excepturi inventore laboriosam voluptatibus, voluptatum facilis iusto praesentium distinctio ratione laborum illo ea commodi quo, dolorum, sit autem delectus ut id nihil eum. Aliquam maiores alias blanditiis ipsa delectus unde vero animi optio illo? Odio ullam vero tenetur laborum ut libero, itaque cupiditate labore ex iste sint adipisci sapiente reprehenderit optio eaque esse, tempora perspiciatis! Hic veritatis, mollitia ad dolores est laudantium saepe quasi reprehenderit beatae cupiditate facere quidem quas perspiciatis modi. Accusamus iste aut quis et architecto fugiat, eaque obcaecati! Nam similique facere vel?</p>
    <p>Laboriosam qui saepe quas illum nisi voluptatum architecto autem. Voluptate explicabo, facere soluta ipsam illo pariatur blanditiis eveniet fugiat quibusdam tenetur ipsum sit corrupti nihil impedit, optio labore quaerat nulla illum, ducimus maiores aspernatur possimus doloribus excepturi! Dolore repellat culpa iure cupiditate esse maxime modi qui quae delectus eum, harum doloremque, sit possimus ex eveniet nemo omnis quam expedita, magnam laborum non atque sapiente. Illum magni aliquid voluptatem aut. Soluta necessitatibus harum esse. Ipsum neque consequuntur aliquid et esse nam tempora saepe, voluptate nobis voluptates quaerat iusto soluta eligendi at cum ex veritatis labore voluptatem. Possimus fugit magnam veniam esse.</p>
    <p>Ipsa quo eaque laboriosam rerum architecto dicta distinctio totam at nulla error molestias voluptate ad necessitatibus ullam optio odio quasi minus, similique earum pariatur ex itaque. Sequi voluptas mollitia magni illo repellendus, soluta sunt nesciunt nobis dolorum natus qui quisquam debitis commodi ducimus nemo nihil incidunt assumenda velit ratione est in, a ipsam? In explicabo nam et laboriosam! Et dolores ducimus cupiditate ut optio, rem dignissimos eveniet sunt obcaecati commodi delectus ad doloremque recusandae, officiis molestias mollitia adipisci. Fugit illo placeat quam libero similique necessitatibus voluptates fuga reiciendis quibusdam! Perferendis maiores consectetur sed ratione distinctio porro dolore ad est id.</p>
    <p>Nulla sit ad laborum debitis reiciendis aut, doloribus nam a id labore optio tempore impedit doloremque? Atque provident, tempora cupiditate, accusantium praesentium laudantium explicabo quos optio dignissimos ad eveniet! Eos harum necessitatibus iusto doloremque totam repellendus fugit placeat eaque repudiandae aut, suscipit officia iure facere earum tenetur accusantium minus non excepturi delectus dolorem debitis odio ipsam? Rerum, atque! Tempore autem, praesentium soluta error ea iure unde tenetur aliquam nostrum maxime facilis. Laudantium corrupti voluptatem temporibus illo repellat dolores non sapiente deleniti sunt. Dolorum at modi dolores deserunt soluta sit facere sint neque non perferendis id, eius provident dignissimos mollitia excepturi?</p>
    <p>Dolores, non repellat, dolor mollitia veritatis magni debitis ratione corporis distinctio quis provident at quos itaque amet praesentium cum odio! Deleniti vitae ipsa aut recusandae facere officiis quas cupiditate dolore inventore sint eos, eaque repellat perferendis aliquid ea earum voluptatum! Nihil pariatur laboriosam voluptas illum! Vero nam quibusdam, voluptatibus labore facilis non consectetur beatae! Repellat repudiandae officiis eaque dolorem hic quisquam eos, saepe debitis possimus, earum, veniam molestias nulla? Ex repellendus corporis fugiat laboriosam optio voluptatibus eaque quibusdam dolores adipisci commodi laudantium consequuntur in ut excepturi, ipsam reiciendis atque laborum minima! Dolore voluptas tempora hic, cum earum dolores perspiciatis dignissimos.</p>
    <p>Alias ipsam cum, ducimus, ipsa, perspiciatis nisi ipsum modi fugiat earum quibusdam sit nesciunt porro. Ipsa neque tenetur sit sed suscipit, error cupiditate praesentium quasi libero omnis dicta aperiam a ipsam, eum corrupti est perferendis iure sequi beatae optio impedit dolorem accusamus nulla quibusdam. Numquam delectus quos suscipit et commodi dolorem ea quam maxime. Fuga vero sequi blanditiis odio, vel autem harum excepturi, minus reiciendis temporibus quod? Repellendus quos veniam beatae. Nostrum reprehenderit dolore facilis aut impedit illum, numquam adipisci labore sed fuga et. Voluptatibus aspernatur, voluptates cupiditate nam cum error qui. Sapiente, quae officiis. Recusandae molestiae nulla inventore iusto.</p>
    <p>Consequuntur nam, cumque distinctio, facere vel nobis debitis temporibus, non vitae ex reiciendis quasi neque inventore sunt. Dolorum voluptatem minus excepturi magni perferendis! Adipisci maxime explicabo odit quis numquam ipsum magnam ex? Eaque officiis quidem illo, itaque nulla aliquam quia iure asperiores aliquid similique obcaecati consequatur cupiditate hic esse cum. Delectus quis labore, quisquam maxime perferendis beatae natus nisi, ex, eligendi esse reprehenderit blanditiis accusamus veritatis repellat quia facilis distinctio deleniti sunt repudiandae sit! Qui facilis autem cumque? Commodi praesentium vel velit beatae illo. Quaerat voluptate tempore quisquam, dolores aspernatur quam delectus veritatis dolor error consectetur, aliquid maxime illum cum?</p>
    <p>Similique modi voluptate saepe, dicta nam ipsa! Ducimus laudantium sequi eum! Pariatur mollitia eum exercitationem, alias, iure, voluptate deserunt nobis minus quibusdam nulla expedita harum cum libero debitis sapiente. Fuga dolorum officiis facere distinctio repellendus alias ut fugiat voluptas a nisi molestiae deserunt quaerat, perferendis explicabo est iste ad totam ipsum voluptates beatae nemo. Exercitationem reprehenderit consequuntur laboriosam officiis dolorum repudiandae deserunt quisquam in saepe fugit. Laudantium deserunt, debitis ea enim asperiores necessitatibus odit accusantium natus dolore, quod neque consequuntur numquam assumenda quibusdam. Reiciendis quis nostrum culpa dignissimos perspiciatis aspernatur aperiam mollitia corrupti ut, quidem totam obcaecati molestiae quaerat delectus.</p>
    <p>Minima pariatur obcaecati adipisci voluptas quos. Reprehenderit quia beatae obcaecati quod rem cum similique cumque adipisci voluptatibus quas minima consequatur ut tenetur rerum earum nostrum accusamus, distinctio repellendus, perferendis provident iusto. Dolores maxime adipisci veritatis eveniet voluptates assumenda pariatur explicabo nisi perferendis dolore nostrum exercitationem, voluptatum nam, ullam sit optio. Asperiores ducimus laudantium mollitia aut iste illum similique, reprehenderit accusantium quod iusto sed nam corrupti impedit unde expedita. Esse perferendis quasi porro quisquam, vel repellendus beatae quam illum. Quis, hic labore sunt eos enim sint fugit? Quidem iste explicabo reiciendis doloremque sit porro aperiam natus ea laudantium ex, sapiente rerum?</p>
    <p>Quisquam accusantium reiciendis officia numquam, saepe ullam. Et vitae eligendi ad dicta illo dolores quas perferendis eum ipsum voluptates nemo, illum iste quisquam vel modi praesentium repudiandae iure aut autem deserunt exercitationem fuga voluptatibus! Porro corrupti eum consectetur facilis libero autem voluptatem ab, excepturi debitis natus sint quam iusto reiciendis cum harum minus eveniet velit. Quidem nisi ipsa laborum numquam illum, aspernatur hic quasi cum a omnis eius exercitationem dolore cumque perspiciatis odit quo consequuntur repellendus. Aliquid sint nulla consequuntur culpa, laboriosam vero. Ullam, dicta minima consequatur corrupti libero delectus unde modi ipsa dolorum. Deleniti ipsam aliquid tenetur eaque nulla?</p>
    <p>Error odio animi cupiditate nostrum laborum neque adipisci possimus molestiae libero quisquam iste numquam accusamus delectus maiores enim et dignissimos a, rerum ipsum quae iusto? Accusantium temporibus laboriosam corporis, est, libero ipsum facilis sunt sint repudiandae culpa aspernatur saepe? Est at dolor corrupti numquam recusandae. Autem distinctio soluta molestiae ipsum exercitationem architecto sunt rem odit facere! Consectetur a mollitia iusto, reprehenderit ab animi neque quaerat, dignissimos unde laudantium ipsa voluptate soluta repudiandae, adipisci inventore voluptas fugit quae necessitatibus harum ut vero modi esse consequuntur dicta. Omnis impedit quas at quaerat dolores quia neque ex temporibus laudantium amet! Recusandae, quod libero.</p>
    <p>Asperiores quos cumque tempore sapiente doloremque? Voluptas consectetur aliquid corrupti exercitationem quam debitis, in itaque voluptatibus quisquam mollitia odit dolores quidem nisi consequatur autem hic esse dignissimos libero ipsum molestias corporis harum quae? Culpa temporibus ea cupiditate? Repellat aut modi, natus exercitationem quas officiis autem nobis harum nesciunt vero aspernatur esse ratione incidunt voluptatem tenetur quidem. Ratione qui rerum minima est consequuntur at molestiae praesentium quibusdam suscipit hic sint aliquam, illum ipsum? Illo nobis maiores quos vel, voluptatibus dolores doloribus quidem unde sit fugiat eius enim, excepturi dolor odio cum nam quis reprehenderit tempore nisi autem obcaecati rem libero. Quae.</p>
    <p>Deserunt possimus ea dolores esse, officiis molestias, cum voluptas, sapiente quis harum quasi ut dolorem reprehenderit earum minima accusantium cupiditate placeat! Quaerat, tenetur excepturi? Necessitatibus labore ducimus incidunt, nobis praesentium soluta saepe nihil esse quo quibusdam in laborum iste voluptatum placeat unde a recusandae molestias numquam vitae debitis asperiores fugit molestiae. Totam aut voluptas perspiciatis, dolorem quas porro iusto eaque eveniet iure odio a reiciendis commodi, autem neque amet vero vel, placeat officiis temporibus facilis eos alias. Soluta deleniti nemo, qui quae dolores corrupti voluptates dicta recusandae tenetur laboriosam officiis harum sint facere accusamus totam exercitationem facilis eligendi. Quia, harum!</p>
    <p>Maiores, iste? Blanditiis laborum possimus quo cumque, voluptate necessitatibus non aliquid rerum, rem voluptates soluta maxime vero dignissimos reprehenderit veritatis aliquam praesentium, ratione inventore odit impedit quisquam fugiat at. Perferendis quia accusamus temporibus eum fuga voluptatibus libero beatae dolores ab debitis animi hic facilis deserunt, impedit laudantium, nobis rerum odit iure saepe autem recusandae? Quia maiores modi consectetur quaerat, facere hic nulla itaque, quos odio illo explicabo vitae. Ex perferendis eligendi quidem eius. Voluptatum sit doloribus inventore nam recusandae dolorem rerum aliquam hic possimus perspiciatis repudiandae a deleniti sed, ullam exercitationem eos? Impedit iure cupiditate suscipit accusamus nemo officiis atque.</p>
    <p>Voluptas quod soluta, harum ad non ea incidunt recusandae vero itaque dolor numquam sapiente quidem repellendus doloribus. Nihil, magni! Quos corporis quam repellat distinctio tempore totam labore! Hic molestiae quidem unde reiciendis. Dolores, quas. Neque voluptatem aliquid sint sequi dolore? Sit fuga perferendis deserunt. Dicta mollitia amet vero cupiditate earum omnis hic, ipsum reiciendis, quaerat quod officiis neque voluptas laudantium sapiente voluptatibus rerum, unde doloribus adipisci assumenda pariatur commodi debitis quis! Quis optio rem accusamus perspiciatis laboriosam eius ad enim laborum eum, magnam beatae ab, exercitationem eligendi numquam iusto quibusdam, corporis officia omnis voluptate quaerat quasi atque! Culpa, voluptatem alias?</p>

• CSS 코드

<style>
    body {
        transition : all 1.5s;
    }

</style>

• JavaScript

<script>

    window.onscroll = function() {

        // console.log(new Date().getTime());

        // console.log(window.scrollY);

        // console.log(document.getElementById('begin').getBoundingClientRect().top);

        //beign - 500 < 현재 스크롤바의 위치 < begin + 500

        let y =  document.getElementById('begin').getBoundingClientRect().top;

        if(y < 0 && y>= -4500) {
            document.body.style.backgroundColor = 'black';
            document.body.style.color = 'white';
        } else {
            document.body.style.backgroundColor = 'white';
            document.body.style.color = '#555';
        }

    };

</script>

• 실행 결과

흰배경 이었다가, 스크롤을 내릴 때, 배경이 검정색으로 바뀜