Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=">
  <title></title>
</head>
<body>
  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Qui ullam in, accusamus, sapiente, nobis totam reiciendis explicabo suscipit porro exercitationem quas optio mollitia fugiat nulla ex aspernatur. Architecto, incidunt minus! Debitis ratione atque voluptate asperiores nostrum quam? Recusandae, sunt. Iure aspernatur dolore asperiores libero eos vel nam a harum corporis. Aut accusantium, enim, earum similique iste numquam exercitationem dolorum doloremque consequuntur odit veniam tempora minus, ipsum ullam magni. Soluta perferendis ipsam officiis? Asperiores vel corporis dignissimos facilis dolorum aspernatur aliquid labore pariatur eligendi quis laborum itaque excepturi repudiandae voluptatibus ipsam rerum cupiditate ea totam, doloremque impedit quia dicta autem explicabo alias. Consequatur possimus, recusandae beatae aspernatur, dicta omnis non saepe expedita harum aliquid illo consectetur facere ullam! Sapiente quo tempora dignissimos perspiciatis sequi iusto optio provident pariatur est repellendus aut, ad suscipit sunt, nostrum iure alias, a dolorum. Quis explicabo quaerat mollitia iusto voluptates iste alias cumque, sed culpa esse voluptatum facere! Debitis minus eius pariatur nobis reiciendis soluta itaque, quas assumenda, perferendis culpa cupiditate aut voluptates libero atque omnis incidunt delectus quidem! Cum natus ipsam error minima, enim modi dolorum saepe laborum sunt, totam nobis! Quasi quis perferendis, quae similique dolores aperiam voluptas vitae, quos facilis et facere amet eius magni eaque minima quaerat nobis, ex rerum rem repellendus. Quam, ducimus nisi? Aut explicabo necessitatibus facere quas. At laboriosam harum ipsum laudantium, recusandae exercitationem perspiciatis corrupti dolorem, molestias deserunt adipisci magni, iusto tempora distinctio accusamus saepe quibusdam delectus aperiam quas quos hic! Totam nulla corporis beatae laudantium architecto officiis eum sunt velit illum iusto, obcaecati minus eligendi maiores autem explicabo quasi! Iste velit repudiandae sunt quidem nihil ea excepturi, quisquam eum saepe magnam! Atque obcaecati error, aut quasi ea cupiditate enim officiis esse veniam vitae dolorum quidem minima sint corporis! Fuga vel facere aliquid consequuntur consequatur ipsam mollitia assumenda nulla! Tenetur minima magni ipsum necessitatibus at adipisci ratione reiciendis nam fugiat labore quos, cupiditate recusandae animi ipsa maxime magnam beatae laudantium iusto! Facere eos harum unde, ducimus minima porro dolorum culpa voluptas iure animi repudiandae? Molestias, ea ducimus. Nemo earum illum neque error laudantium distinctio atque repudiandae, id fugiat quod laborum odit est maxime ea laboriosam dicta alias quidem necessitatibus voluptates, temporibus quis, vitae ipsum illo sint. Dicta impedit soluta cupiditate dolor, perspiciatis, sit omnis voluptatem numquam praesentium necessitatibus eos tempore suscipit debitis. Voluptates iure nemo hic? Fuga enim dolore officia tempora deleniti nemo magni sit nulla quidem velit vero laborum aliquid quo possimus assumenda ullam, reprehenderit necessitatibus dolor nostrum amet qui cumque quis odio impedit. Deleniti, numquam debitis, facilis saepe rerum beatae nam consequatur nesciunt corporis velit voluptatum incidunt laborum ullam doloribus ea recusandae aut. Tenetur nesciunt ipsa sit, repudiandae dolor veniam accusamus sint vel, culpa dolores in adipisci voluptate quasi tempora amet atque nihil deserunt omnis, eveniet doloremque. Placeat libero ratione dolorum ea tenetur nesciunt, quisquam vitae quibusdam provident voluptate eos. Quis, quibusdam porro suscipit, maiores hic reprehenderit ab perspiciatis labore facilis dicta itaque ipsam officia, voluptas qui provident repudiandae nobis saepe impedit. Eos explicabo saepe ipsa eaque, dolor et consequuntur quod! Odit eum iure dicta enim? Natus dignissimos ipsa quia nostrum quam laborum obcaecati possimus dicta repudiandae facere earum nulla consequatur inventore, nemo velit ut ex, similique at placeat sit? Blanditiis, quae odio adipisci sapiente ab error quaerat sequi cupiditate eius officia commodi dolor nihil magnam. Nesciunt cum recusandae error vel deleniti impedit assumenda ad eos, facilis ipsam delectus accusamus ratione harum, maiores voluptates labore asperiores hic natus, expedita obcaecati ea repudiandae fugiat. Praesentium, laboriosam incidunt. A animi, facere ducimus unde vero magni iste nostrum ut dolores nobis ratione non sapiente, veniam nulla hic voluptate illo aliquam dignissimos labore exercitationem consequuntur quos doloribus culpa nam? Fuga eum aspernatur inventore maxime provident nostrum, voluptatum accusamus nisi, repellat ducimus dolorum iusto? Veniam commodi nihil nesciunt sint molestias quisquam eius unde sed at iste deserunt corporis voluptas delectus, reprehenderit error maiores dignissimos distinctio. Blanditiis eligendi nesciunt molestiae animi, error amet temporibus voluptate, quidem fugit aspernatur laudantium dolores nihil recusandae a veritatis eveniet eaque aperiam. Aspernatur, ab possimus architecto odio delectus soluta ex maiores commodi doloribus. Facilis, quibusdam maxime? Saepe minima doloremque animi a fugit alias dicta hic. Ab, omnis aliquid. Eius, iusto. Cum doloribus, natus distinctio officia illum architecto dicta quae dolorem dolore sunt iste non nemo ratione magnam rerum tempore possimus minima magni deserunt rem blanditiis! Odio repudiandae voluptate officiis quibusdam sint deserunt odit tempore cum commodi iste a culpa magnam, dolores perspiciatis iure earum, modi necessitatibus maxime, consequuntur hic dicta! Voluptatum, commodi cum. Qui aliquid cumque omnis ducimus, tenetur ipsum maiores blanditiis voluptatum ullam fuga iste totam sit numquam rem libero. Perspiciatis animi voluptates earum officiis et ipsum quaerat odio, quidem iusto blanditiis velit? Necessitatibus doloribus reiciendis recusandae. Non quia quis minus ab sequi sint, magni officiis nemo consequuntur ea voluptas vel aliquam debitis, aspernatur iste sapiente velit, ipsam expedita eius aut consectetur provident optio eligendi! Iste, nesciunt at! Debitis magni dolor ea fugiat non quidem nisi asperiores, dolores laboriosam ratione, recusandae similique aperiam sint expedita voluptas vel illo veniam, ex rem. Animi minima fugit nam officia vitae quasi, eos sapiente, non soluta numquam, exercitationem molestiae. Suscipit est soluta recusandae placeat dicta! Laboriosam minima praesentium nihil explicabo tenetur aperiam, quasi consectetur, unde eveniet eum facilis aspernatur reiciendis molestiae repellendus obcaecati facere cumque est velit exercitationem, voluptas voluptatem! Quo, laudantium consectetur! Molestias quidem aliquam placeat aspernatur, adipisci nam dolorem quod id voluptate dolores, neque maiores dolore! Nulla earum est provident, laudantium quibusdam in repudiandae, possimus recusandae necessitatibus ducimus veritatis aspernatur distinctio voluptas eum consequuntur tenetur sapiente quaerat maiores, veniam rem. Laudantium tempora cumque magnam ipsa dolore reiciendis inventore nobis delectus magni rem. Similique, cupiditate earum commodi laudantium iusto ratione ea incidunt corrupti recusandae, maiores ut suscipit? Rerum expedita sapiente atque cumque! Eveniet delectus eum aspernatur ipsam ut neque? Perferendis similique sed neque ratione id iste reiciendis iure inventore magnam. Quaerat at cumque delectus reiciendis, similique amet vitae hic totam suscipit odit iste laudantium ex iure impedit? Cupiditate culpa numquam, expedita earum atque placeat hic id enim aut. Maxime voluptatem et porro dolore voluptas earum. Facilis unde ab molestiae eum adipisci nam repudiandae quidem fuga repellendus porro veniam quibusdam illo sit iste, quia voluptate. Autem, id unde praesentium possimus qui quas necessitatibus consectetur cumque facilis itaque facere eveniet animi alias temporibus dignissimos suscipit voluptatum deserunt. Labore eum ipsa ad natus enim beatae? Iure mollitia at et autem hic fugiat exercitationem cupiditate vero. Obcaecati amet laborum excepturi quisquam perspiciatis veritatis quos officiis. Laudantium omnis natus voluptatibus veritatis tempora? Animi soluta praesentium consectetur, deleniti odio vero veritatis maxime atque, commodi laudantium facere! Iste beatae distinctio, sint provident aliquid eum vel soluta illum blanditiis ipsam ab a nostrum minus natus eos maxime eius suscipit officia consectetur excepturi est necessitatibus magnam. Error quam fugit magnam optio, pariatur, consequuntur repudiandae inventore atque officia temporibus, quos ut earum odio saepe. Impedit, accusantium? Sed illo, magni omnis officiis, dolore possimus aliquid nostrum optio est ducimus impedit, totam dicta quas! Porro assumenda natus culpa voluptatem exercitationem itaque delectus, illum voluptate pariatur vel id cumque. Laborum rerum, eveniet, qui delectus sunt dolores laudantium ducimus vero cupiditate veritatis adipisci eum nobis possimus voluptate facilis placeat corporis perferendis, tempore exercitationem! Soluta hic nisi qui explicabo obcaecati tempore, commodi quas voluptatum, ipsa consectetur corrupti minus aliquam dolorem amet recusandae ad accusamus. Sapiente fuga aliquid amet quibusdam quis aspernatur est unde quo officia cupiditate porro corporis, hic illum suscipit! Quo consequuntur atque minus! Blanditiis debitis provident voluptatum repellendus, magnam suscipit consequatur eius quisquam delectus dolorem dignissimos, ut explicabo quia corporis eligendi iure eveniet ipsam! Totam delectus accusantium repellat recusandae, iusto aliquam? Placeat iusto eum inventore ab aspernatur tenetur, quam tempora incidunt reprehenderit, unde labore beatae repellendus atque provident corporis quis fugit fuga itaque magni harum repudiandae sapiente sunt sed! In iusto impedit accusamus dolorem placeat laboriosam nemo debitis nihil eos sapiente laudantium, aliquam itaque ipsam accusantium perferendis vel ducimus culpa explicabo nesciunt fugit quo fuga? Fuga maiores earum, quisquam fugiat odio qui repudiandae quos eveniet sequi eos. Cumque cupiditate sequi distinctio ratione nostrum odio suscipit quae quibusdam rerum a, modi quo ea ullam unde voluptatem itaque perferendis blanditiis ipsam beatae deserunt harum dignissimos. Nihil debitis recusandae dolores sunt placeat ipsum beatae excepturi odio! Sed unde libero maiores, a itaque doloribus! Sit molestias quibusdam et quia fuga ipsam quos hic? Veniam quam suscipit ex, minima ducimus saepe itaque, laudantium distinctio, beatae officia eius porro omnis. Corporis error, sunt commodi veritatis perferendis expedita reprehenderit delectus vitae illo tempore odit eius dolor molestias deserunt odio facilis a modi fugiat cumque distinctio? Error et quod incidunt quas ratione ducimus enim sit similique. Facilis, officiis perferendis atque vitae nostrum accusantium in nam provident sed odit perspiciatis fugiat enim est voluptatem labore mollitia ratione voluptate velit dolorum commodi soluta quibusdam. In quaerat odit id itaque, soluta possimus accusamus officiis architecto maiores sit reprehenderit ea hic excepturi eius unde cum quam? Excepturi neque quia id reiciendis, nemo eligendi accusantium architecto! Ex, dolorem culpa. Distinctio, magni, consequatur eum delectus aspernatur cupiditate id corporis quisquam, corrupti vel autem impedit maiores beatae voluptatibus deserunt quaerat nulla laudantium neque sapiente est velit aut accusamus. Nam repudiandae totam incidunt rerum. Fugiat distinctio tempore porro fugit perferendis quibusdam repellat exercitationem, facilis quidem accusantium. Consequatur ducimus molestias assumenda dolore nobis eligendi obcaecati velit beatae possimus, ullam esse, impedit blanditiis nemo et illum totam veritatis atque quidem consectetur aspernatur. Rem, autem eveniet? Assumenda vitae porro repellat adipisci quaerat dolorum, dolorem sint nesciunt nulla ad error in sunt ipsum perferendis unde beatae dolor vel nihil voluptate! Eius enim quia omnis hic, amet delectus cum voluptas voluptatum labore animi, facere culpa sapiente, incidunt ipsa ad quo vero sunt repellat ratione? Ipsa iure reiciendis sunt quod exercitationem corrupti, doloremque vero ab natus sint doloribus perspiciatis, et id ex quaerat aut quis excepturi dolorum, veritatis obcaecati! Adipisci accusamus soluta tenetur possimus quos quo quibusdam commodi deleniti eaque facere, aut culpa maiores nemo provident iste sed, nulla blanditiis debitis quisquam. Expedita dolore sit, odio maxime beatae dolor obcaecati distinctio explicabo commodi quibusdam voluptate rerum necessitatibus reprehenderit, doloremque in iusto rem debitis voluptates nihil? Iusto ipsa laborum saepe doloremque, molestias perferendis fuga dolor sed doloribus voluptatem excepturi quia tempore earum vero. Illo, provident placeat cum non, officia vitae, nulla id iusto veritatis cupiditate beatae praesentium corrupti odit possimus aut! Explicabo repellat, doloribus accusamus omnis accusantium eius voluptas ducimus similique hic nobis odio delectus exercitationem cupiditate, nesciunt cumque nisi recusandae. Magni vitae tenetur tempore odit perspiciatis maiores exercitationem repellendus, doloremque enim fuga, vel eligendi libero itaque unde harum non, repellat rerum beatae iure ipsa et illo autem cupiditate! Deserunt, sapiente veritatis? Porro, repudiandae et tenetur distinctio, eligendi eos, quasi assumenda unde nam omnis amet. Voluptatum sequi, fuga harum odio esse alias earum. Nam vero tempora animi voluptas nobis omnis veritatis iusto. Veritatis eius autem unde aliquid nobis inventore quas, similique obcaecati facere qui minus nisi dicta quibusdam officiis eos adipisci ab doloremque ex enim, accusamus, optio repellat tenetur. Cupiditate, sunt ipsum, saepe esse animi totam natus est deleniti odit eligendi adipisci alias labore optio. Laudantium, perferendis illum asperiores eaque ratione quam veniam delectus sunt repellat amet nihil ad. Cupiditate nisi deleniti nihil obcaecati assumenda fugiat beatae eligendi a incidunt. Minus sunt nobis iste, molestias voluptatum labore aut sequi? Impedit soluta omnis et perferendis sint ullam, dolore ipsam est, illo inventore, ab voluptatum non incidunt libero eligendi aut laudantium explicabo nulla sed mollitia a quidem quos doloribus! Voluptatibus enim alias, tenetur aspernatur ea expedita ipsam blanditiis incidunt explicabo veniam reiciendis nemo ipsum vel optio inventore? Sed aliquam saepe, quidem nisi eaque eos harum culpa blanditiis ea maxime reiciendis aliquid quo quis atque debitis illo deserunt quos odit quaerat. Nemo praesentium cumque alias quidem velit molestiae cum laborum harum ducimus ipsum laboriosam at aut ipsa itaque, architecto reiciendis doloribus assumenda nam error fugiat expedita quibusdam dolorem nobis veritatis. Similique voluptatum et dolorem amet id deleniti nisi. Sed fugiat esse amet ipsam atque, minus iste voluptatum aspernatur voluptatem quisquam sapiente sint voluptatibus provident ipsum repellat fuga corporis minima cumque ut. Tempore dolores iure voluptatem quod quam ea accusantium ducimus quaerat magnam enim. Commodi esse molestias nostrum dolor atque veniam architecto voluptate perferendis excepturi, unde praesentium aliquid illo, veritatis officiis laboriosam expedita, ratione in ullam! Aut enim nulla odio, culpa molestiae pariatur, reprehenderit reiciendis consectetur neque ipsa animi, ullam cupiditate magnam molestias? Tenetur quis et officiis maxime placeat facere corporis eos blanditiis corrupti unde? Enim cupiditate similique laudantium autem esse, quibusdam deserunt maxime dignissimos odit reprehenderit iure! Voluptatem, dolore recusandae ut quis blanditiis tempora animi deserunt nihil ab repudiandae in impedit ad eligendi, quae maxime corporis obcaecati aperiam minus enim aut aspernatur alias praesentium. Similique eligendi nulla asperiores aspernatur fuga voluptas delectus quaerat nam, officia omnis! Laudantium nobis eveniet voluptatum a sit, laborum fuga voluptates repudiandae possimus, et quaerat officia suscipit magni veniam commodi necessitatibus odit esse. Eaque quaerat repellat quas enim officiis expedita sint quia voluptatum nulla eligendi, accusamus aliquid fugiat doloremque odit sunt odio nesciunt cumque perferendis ab maiores temporibus? Dolores, distinctio rem, quam est sint blanditiis beatae quaerat placeat odit, enim aliquid asperiores unde commodi quod repudiandae. Molestias quaerat temporibus quibusdam optio animi, dolores nisi nemo sint, ipsum, laboriosam quia? Dicta neque dolores consequatur? Voluptas quam, error voluptate inventore nihil fugiat, vitae odit sunt totam architecto quae enim deserunt consequuntur dignissimos quia delectus odio a perferendis fugit laboriosam cupiditate aperiam. Fuga amet vitae sequi, minus ipsum quibusdam. Fugit cumque unde debitis nostrum consequatur tenetur quod dolores, suscipit assumenda natus voluptatem dolorem nihil adipisci omnis impedit. Aut velit maxime debitis necessitatibus tenetur quos sequi rem magnam, natus temporibus quod non ratione exercitationem illum, incidunt, aliquid saepe dignissimos aperiam. Fugiat veritatis, quam beatae ipsam deleniti fugit reprehenderit unde ea illum voluptatem quod qui, voluptatibus velit rerum perspiciatis, sit accusantium architecto omnis. Exercitationem tempora nihil obcaecati, aspernatur, alias in reprehenderit perspiciatis earum repellat enim ratione totam accusantium dolorem quasi dolor asperiores animi amet hic tenetur quas rerum. Obcaecati iusto laborum corrupti itaque modi tempora odio sed veniam, quaerat velit hic rerum similique minus deleniti consectetur sint ipsum iure ab doloremque delectus quae? Modi labore obcaecati magni deleniti, eveniet voluptatem cupiditate eos facere quod autem hic repudiandae inventore voluptates deserunt optio, mollitia, ea earum temporibus itaque atque neque pariatur? Aspernatur alias rem autem doloribus neque iste perspiciatis at commodi quidem, veritatis, quo doloremque, enim fuga porro. Perferendis iusto non rerum tempora accusantium deleniti consectetur tempore nam, est asperiores mollitia ea illum. Facere, eveniet! Ut labore voluptate placeat corrupti? Illum consequatur placeat suscipit error soluta, quaerat consequuntur minus optio officia aperiam amet itaque maxime officiis et earum veniam mollitia. Officia soluta, porro fuga facere exercitationem accusantium. Dolores ipsam aperiam eius magni ut officiis quo deserunt inventore, ipsa dignissimos, reiciendis assumenda id repellendus ad sed ab aliquam dicta tempora alias laboriosam. Quasi officia eos quae dicta! Eius laboriosam hic dolor consequatur commodi amet nulla tempora voluptatem quod ab et veniam repellat aut ducimus sapiente, tempore similique! Cupiditate blanditiis error alias iusto earum aperiam cum facere impedit veritatis, minima quasi? Tempora assumenda dolorum quae impedit rem est totam architecto eaque, cumque debitis eos numquam eum maxime reprehenderit illum similique sed animi fugit nihil atque voluptates delectus officiis aspernatur voluptas. Sunt cum obcaecati rerum deleniti porro quas tempore nulla optio perferendis aut magni natus velit neque inventore, fugiat ea repudiandae ad animi? Neque accusantium consectetur iure dicta quisquam, fuga recusandae similique, nihil aut illo distinctio! Aliquam sapiente dolorem laudantium natus, suscipit quae? Sint molestiae adipisci recusandae consectetur omnis, voluptatibus, ipsum hic molestias aperiam vel repudiandae suscipit consequuntur deleniti sit, excepturi atque officiis sequi. Nisi sequi deserunt rerum aperiam, pariatur quis suscipit iure mollitia? Odio maiores quibusdam quod exercitationem ab inventore necessitatibus ducimus ut nobis est quo deleniti fugit illo recusandae assumenda aspernatur eaque aliquid corrupti excepturi ullam praesentium, quia nisi? Nam veniam soluta nisi porro saepe quisquam facilis sunt, blanditiis eaque dicta perferendis iusto molestiae eius quod quam ipsam aut, sapiente accusamus tempore aliquam est? Minima aut modi autem vitae velit facere laboriosam voluptate tenetur. Ratione harum voluptatibus animi quod fugit, esse aliquid distinctio, magni autem ex voluptatum doloribus eum accusantium dignissimos illum veritatis. Totam perferendis doloribus sint sunt non quidem unde omnis! Rerum quo ex iste totam nam magnam fugit. Fugiat magni id ut distinctio atque eveniet consequuntur iste minus itaque quo! Error mollitia nostrum exercitationem ea, iure, consequatur asperiores rem quis ducimus, voluptatibus recusandae saepe quaerat nam aut! Quo eaque doloribus, aut minus, molestias quibusdam laudantium nisi quidem mollitia temporibus doloremque atque harum amet, voluptatum fuga consectetur iusto eligendi? Alias dolorum quod consectetur fugiat vitae sit voluptates facere laborum ratione iure, saepe architecto quos cumque ad, error, praesentium aut nam? Iste, ullam modi. Ratione aspernatur accusantium placeat soluta itaque consequuntur labore ut quia, quibusdam omnis ullam, quisquam perferendis rem eos repellat temporibus explicabo deserunt eveniet cumque. Porro, provident! Illo porro commodi expedita ad. Perferendis maiores distinctio voluptates placeat suscipit sapiente optio porro, voluptatum esse nisi cum doloribus earum nulla libero fugit amet maxime. Quibusdam nemo libero provident. Soluta, eveniet consequatur? Tempora dolore nemo porro corrupti dignissimos, quidem saepe cum officiis ut debitis facilis consequatur sunt sapiente quia illum quasi veniam incidunt architecto voluptas repellendus magni ea libero culpa iure. Commodi perspiciatis facilis, beatae magni dolore eveniet ipsa. Dolor commodi voluptate nisi facilis voluptatem sapiente in deserunt velit, quisquam rem veritatis sint, adipisci nostrum pariatur amet sequi. Voluptatibus, voluptatem dolorum, vel quas consequuntur earum ducimus ipsum quae error soluta provident eaque praesentium nihil, tempora placeat? Illum repudiandae dignissimos, corporis ullam reprehenderit accusantium? Quidem odit necessitatibus at tempore, maiores neque soluta eius molestias totam qui cum eligendi sequi alias porro adipisci similique eum unde delectus laborum ipsum autem reprehenderit officiis! Ducimus laborum harum error, possimus voluptatum aut asperiores mollitia provident, sequi sunt quaerat rerum, illum iure sint facilis amet alias ratione velit. Neque repudiandae harum unde. Cupiditate odit adipisci aspernatur reiciendis, sunt quaerat soluta in? Ut alias porro qui nulla animi eum? Porro repellat, in quod consequuntur recusandae nemo aut ipsa minima provident voluptatibus iusto magni dolorum. Cumque, voluptatibus. Vitae cum ex doloremque, adipisci, reiciendis vero aliquam saepe veritatis libero non corporis atque.
  </p>
  <div class="block"></div>
  <div class="block-1"></div>
</body>
</html>
              
            
!

CSS

              
                .block {
  width: 100%;
  height: 600px;
  background-color: yellow;
}
.block.red {
  background-color: red;
}
.block-1 {
  width: 100%;
  height: 600px;
  background-color: green;
}
              
            
!

JS

              
                $(document).ready(function() {
  $(window).on('scroll', () => {
     var blockPosition = $('.block').offset().top,
         windowScrollPosition = $(window).scrollTop();
    
    if( blockPosition < windowScrollPosition ) {
      $('.block').addClass('red');
    } else {
      $('.block').removeClass('red');
    }
  });
});
              
            
!
999px

Console