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

              
                
<header class="header">
  Top Navigation
</header>

<div class="container">
  <!-- start slipsum code -->

  <div class="hint">
    <b>Hint:</b> Scroll down and then start scrolling up ;)
  </div>

    <!--   Hipster Ipsum http://hipsum.co/?paras=50&type=hipster-centric -->
   <div class="hipsum"><p>Normcore man braid raw denim asymmetrical chicharrones.  YOLO messenger bag XOXO, master cleanse locavore biodiesel pinterest.  Echo park keytar chia, narwhal hoodie pour-over bushwick direct trade  deep v viral authentic fap kitsch salvia.  Pinterest bespoke kinfolk skateboard keffiyeh.  Kitsch green juice flannel, kogi vegan taxidermy chillwave 8-bit normcore.  8-bit flannel wayfarers PBR&amp;B.  Blog everyday carry neutra YOLO readymade.</p><p>Twee offal put a bird on it, marfa pitchfork iPhone distillery drinking vinegar hashtag.  Twee migas chia cred.  Slow-carb bespoke chambray helvetica heirloom, cred health goth literally.  90's polaroid schlitz umami aesthetic vinyl crucifix pour-over hoodie, paleo heirloom.  Occupy gluten-free meh, salvia microdosing next level vegan YOLO heirloom irony roof party ramps tattooed.  Flannel meggings flexitarian, selvage single-origin coffee bushwick banh mi fingerstache.  Trust fund forage literally, small batch leggings thundercats poutine.</p><p>+1 williamsburg hammock, viral deep v gentrify polaroid wolf venmo selfies.  Organic tilde tousled you probably haven't heard of them chia.  Authentic fanny pack actually chartreuse gluten-free before they sold out.  Franzen pickled street art thundercats meggings man bun.  Ugh hoodie etsy thundercats tilde, biodiesel mlkshk polaroid cardigan sriracha.  Roof party small batch chia selvage ennui, franzen jean shorts pug 90's sustainable beard brunch yr vegan food truck.  Cred squid thundercats, stumptown tote bag actually plaid salvia pabst kale chips normcore banjo polaroid irony.</p><p>Blog skateboard bicycle rights vinyl authentic.  3 wolf moon literally health goth pickled normcore.  Fashion axe cliche lomo, synth distillery YOLO skateboard flexitarian cred irony pickled actually normcore paleo.  Tilde gluten-free salvia asymmetrical stumptown irony.  Cardigan church-key jean shorts listicle cornhole.  8-bit sustainable tote bag, tattooed hoodie semiotics roof party wolf iPhone tilde twee.  Pour-over fingerstache seitan chicharrones, thundercats pork belly dreamcatcher pickled crucifix literally mixtape 3 wolf moon normcore forage hoodie.</p><p>Venmo health goth humblebrag put a bird on it normcore, fashion axe fanny pack.  Whatever deep v forage, synth raw denim beard next level venmo.  3 wolf moon sustainable readymade, pickled bicycle rights portland twee food truck.  Franzen flexitarian whatever you probably haven't heard of them hashtag messenger bag church-key.  Slow-carb chambray viral kombucha cliche food truck.  Tilde whatever seitan, neutra typewriter street art sriracha shoreditch mlkshk meggings fingerstache marfa blog.  90's sustainable intelligentsia tumblr, master cleanse disrupt twee hella mixtape lomo pitchfork echo park cornhole gentrify.</p><p>Locavore helvetica deep v squid, direct trade  ramps cray master cleanse.  Hoodie chambray microdosing, raw denim man braid messenger bag 3 wolf moon cornhole pabst.  Tattooed marfa biodiesel keytar.  Man bun leggings direct trade  literally, humblebrag pop-up cronut trust fund keytar paleo pitchfork.  Poutine mlkshk chia retro, tilde next level wolf.  Photo booth cray organic single-origin coffee sustainable.  Thundercats dreamcatcher biodiesel kitsch bitters asymmetrical.</p><p>Craft beer kale chips gastropub VHS disrupt synth master cleanse PBR&amp;B, skateboard bushwick.  Farm-to-table chambray synth wayfarers gastropub.  Flannel green juice gochujang meditation pour-over DIY.  IPhone wayfarers knausgaard bushwick trust fund paleo, blue bottle narwhal ennui farm-to-table offal listicle cray taxidermy.  Crucifix mustache godard narwhal stumptown, fanny pack vinyl chia tumblr disrupt.  Meggings venmo bicycle rights brooklyn, street art thundercats try-hard mixtape microdosing hammock roof party pour-over PBR&amp;B.  IPhone lomo selvage, ethical photo booth flannel scenester biodiesel.</p><p>Meditation YOLO vegan photo booth, yuccie seitan cred forage sustainable kombucha ethical migas tilde banh mi.  Paleo aesthetic fashion axe, normcore post-ironic small batch squid chambray gluten-free intelligentsia church-key.  Cold-pressed chia small batch raw denim, viral keytar narwhal pinterest actually flexitarian DIY umami.  Locavore gastropub four dollar toast, helvetica vice fingerstache kinfolk.  Craft beer chartreuse kombucha try-hard vinyl, keytar fap occupy taxidermy meh single-origin coffee you probably haven't heard of them gochujang.  Church-key pork belly master cleanse tilde, photo booth slow-carb humblebrag.  Occupy knausgaard cray, twee man bun you probably haven't heard of them fap trust fund direct trade  austin swag leggings.</p><p>Messenger bag shabby chic tumblr, wolf 8-bit tote bag portland humblebrag blog kinfolk.  Bicycle rights four loko paleo cray, quinoa typewriter 8-bit lo-fi kitsch helvetica health goth street art selvage keffiyeh poutine.  Pork belly mlkshk lomo, gentrify waistcoat master cleanse authentic next level gochujang distillery crucifix marfa typewriter.  Tilde cray seitan schlitz.  Disrupt chartreuse artisan, affogato polaroid art party ethical deep v bespoke letterpress.  Small batch pinterest selfies yuccie put a bird on it, umami franzen iPhone migas food truck tofu.  Shoreditch offal flannel bicycle rights venmo kombucha jean shorts, single-origin coffee meh hoodie polaroid.</p><p>Wayfarers kickstarter etsy flannel mlkshk pinterest, food truck fingerstache twee iPhone tote bag synth marfa vegan chillwave.  Everyday carry flexitarian vice, keffiyeh stumptown cornhole messenger bag 90's tofu tote bag occupy listicle synth.  Retro vinyl polaroid, godard photo booth pug seitan plaid.  Raw denim williamsburg mlkshk ramps readymade, trust fund cardigan farm-to-table chicharrones microdosing locavore portland banjo gentrify.  Schlitz truffaut sriracha fingerstache, banh mi irony hashtag cold-pressed DIY.  Synth knausgaard hammock, bitters polaroid kickstarter keytar mustache PBR&amp;B cronut tilde aesthetic put a bird on it dreamcatcher chia.  Bicycle rights organic paleo four dollar toast.</p><p>Skateboard 3 wolf moon franzen, fixie pickled disrupt bushwick fingerstache kogi direct trade  shoreditch.  Bitters kitsch celiac keytar irony 8-bit keffiyeh, brooklyn hoodie cronut post-ironic hammock.  Keytar echo park whatever hammock fixie, craft beer iPhone fingerstache semiotics leggings microdosing fanny pack.  IPhone helvetica listicle, YOLO +1 mumblecore lo-fi put a bird on it authentic PBR&amp;B.  Listicle viral 90's quinoa occupy vice butcher green juice.  Polaroid raw denim tofu fanny pack fingerstache, shoreditch literally schlitz man braid thundercats narwhal.  Trust fund whatever fixie, mumblecore cold-pressed YOLO cardigan chillwave lo-fi normcore literally schlitz.</p><p>Etsy semiotics migas beard quinoa pitchfork.  Keytar occupy fingerstache pop-up, chicharrones austin fashion axe.  Ramps before they sold out meggings, bespoke next level etsy sriracha semiotics biodiesel chicharrones tattooed mustache shoreditch hella.  Wayfarers literally selfies raw denim lomo echo park jean shorts.  Organic shabby chic PBR&amp;B, truffaut heirloom pop-up tumblr hoodie offal yr bespoke sriracha mlkshk schlitz humblebrag.  Craft beer pork belly yr jean shorts, wolf butcher hammock tilde iPhone selfies bicycle rights.  Scenester seitan forage pickled 3 wolf moon cred, brunch iPhone.</p><p>Kitsch mumblecore gluten-free, williamsburg chillwave 3 wolf moon 8-bit chartreuse tote bag taxidermy flexitarian kombucha listicle kinfolk sustainable.  Intelligentsia taxidermy cold-pressed, mustache DIY disrupt etsy sustainable cliche gentrify kogi affogato.  Hammock beard pour-over cliche ennui.  Pitchfork drinking vinegar hoodie authentic bushwick paleo mixtape.  Franzen hoodie swag trust fund, ramps quinoa sustainable bicycle rights.  Wolf keffiyeh +1, mustache flannel forage waistcoat mlkshk selvage kickstarter occupy vinyl.  Heirloom fashion axe tote bag before they sold out forage YOLO cornhole next level truffaut hammock.</p><p>Tote bag hammock four dollar toast cray umami.  Echo park pinterest chambray gastropub gluten-free.  Pitchfork beard bespoke venmo 3 wolf moon leggings.  Four loko asymmetrical venmo tousled, kinfolk ramps microdosing hella polaroid knausgaard chartreuse cray selvage.  Gentrify microdosing schlitz roof party kogi sartorial.  IPhone mlkshk man braid cold-pressed trust fund, lomo church-key plaid bicycle rights cornhole everyday carry locavore meditation chambray echo park.  Next level selvage actually sriracha chambray.</p><p>Ethical leggings yuccie, aesthetic gastropub messenger bag everyday carry hoodie seitan kinfolk whatever etsy scenester 8-bit.  Pinterest cardigan gastropub, flexitarian ethical normcore try-hard meditation lumbersexual knausgaard sustainable.  Banjo selvage taxidermy, bitters listicle marfa man bun skateboard YOLO helvetica.  Aesthetic XOXO PBR&amp;B DIY pug scenester.  Occupy before they sold out polaroid, godard fingerstache tacos meggings bespoke skateboard tousled vegan shoreditch wolf seitan.  Intelligentsia franzen post-ironic typewriter portland try-hard viral.  PBR&amp;B everyday carry letterpress, truffaut vegan scenester meggings occupy mustache mixtape yuccie waistcoat.</p><p>Cray brunch franzen twee.  Farm-to-table tote bag polaroid meditation godard.  Offal dreamcatcher semiotics craft beer humblebrag, chicharrones ramps fingerstache intelligentsia meh.  Raw denim selvage crucifix, farm-to-table typewriter offal readymade vice affogato jean shorts normcore PBR&amp;B umami.  Everyday carry bushwick pabst church-key, godard synth tofu green juice migas occupy fap 8-bit.  VHS trust fund waistcoat, beard four loko gochujang you probably haven't heard of them wayfarers wolf bushwick knausgaard chicharrones 90's try-hard ugh.  Raw denim chillwave bitters, beard flannel tattooed chicharrones dreamcatcher single-origin coffee seitan poutine kickstarter.</p><p>Hella butcher microdosing blog.  Authentic whatever jean shorts stumptown brunch.  Before they sold out seitan organic sartorial, 3 wolf moon literally deep v crucifix VHS art party +1 meditation.  Waistcoat asymmetrical kitsch, PBR&amp;B freegan intelligentsia street art.  Single-origin coffee flannel gentrify fap banjo wolf food truck tote bag blog health goth, mlkshk narwhal chia kinfolk.  Whatever single-origin coffee meh cronut.  Craft beer selvage four loko 8-bit keytar bespoke.</p><p>Pickled meh stumptown twee.  Blue bottle kogi gochujang cronut swag jean shorts.  Cray kombucha offal cliche.  Tote bag cray stumptown, seitan locavore everyday carry +1 drinking vinegar plaid distillery.  Pour-over pop-up four dollar toast chicharrones.  Synth organic retro cred semiotics, heirloom taxidermy ramps.  Green juice letterpress brunch kombucha affogato single-origin coffee, humblebrag blue bottle mlkshk small batch health goth beard freegan.</p><p>Trust fund XOXO twee keffiyeh.  Tofu plaid truffaut, 3 wolf moon ennui ugh ramps next level gluten-free pitchfork seitan.  Put a bird on it godard cred slow-carb, gochujang blog before they sold out neutra.  Artisan offal cred, gentrify neutra photo booth jean shorts sriracha iPhone typewriter street art cold-pressed kinfolk.  Bitters gentrify tousled four dollar toast chillwave.  Keffiyeh sustainable aesthetic cred, asymmetrical affogato ethical everyday carry.  Tattooed pour-over pickled post-ironic pork belly, ethical humblebrag.</p><p>Messenger bag disrupt taxidermy, slow-carb +1 austin sustainable try-hard.  Mumblecore crucifix williamsburg stumptown.  Pork belly distillery crucifix waistcoat, echo park literally gluten-free kickstarter kinfolk ethical cornhole normcore microdosing.  Pinterest health goth cliche vegan twee, tacos waistcoat whatever four dollar toast sriracha bitters gentrify farm-to-table lo-fi fap.  Ugh keytar franzen, man bun banjo messenger bag kombucha chillwave bushwick biodiesel.  Banjo slow-carb ethical affogato venmo, pour-over taxidermy scenester selfies bicycle rights.  IPhone hella retro swag, scenester literally lumbersexual pop-up artisan chia celiac cliche kombucha portland.</p><p>Readymade YOLO you probably haven't heard of them crucifix gochujang thundercats.  Fixie scenester aesthetic chia polaroid.  Chicharrones wayfarers church-key, etsy mustache echo park +1 migas swag listicle cornhole banjo street art.  Church-key meh mlkshk, iPhone selfies freegan letterpress bicycle rights tacos scenester keytar organic knausgaard.  Fashion axe hashtag normcore cornhole tote bag bitters.  Forage cardigan fingerstache marfa.  Man bun kitsch synth irony plaid.</p><p>Pabst keffiyeh food truck disrupt.  Deep v plaid cold-pressed, tacos dreamcatcher occupy poutine kogi banh mi.  Dreamcatcher wayfarers lo-fi vice locavore before they sold out, heirloom slow-carb street art banjo cray selfies microdosing yr crucifix.  Pour-over pitchfork shoreditch fashion axe pickled poutine, umami brooklyn four loko freegan.  Artisan microdosing bespoke, celiac fanny pack meggings drinking vinegar readymade chicharrones.  Migas forage irony sriracha flannel ugh.  Squid blue bottle photo booth cornhole, kogi single-origin coffee lo-fi synth kickstarter dreamcatcher try-hard fixie gentrify food truck asymmetrical.</p><p>Beard post-ironic cliche biodiesel migas art party.  Cliche deep v leggings crucifix food truck banjo authentic, marfa fap trust fund poutine.  Yuccie squid austin lumbersexual, plaid yr seitan actually.  Literally typewriter tattooed 8-bit, microdosing chartreuse brooklyn cornhole gastropub stumptown roof party messenger bag.  +1 skateboard paleo pitchfork.  Heirloom sriracha street art meditation health goth, you probably haven't heard of them quinoa next level echo park semiotics distillery.  Cronut blog meh franzen, intelligentsia 8-bit roof party taxidermy poutine.</p><p>Slow-carb jean shorts lomo quinoa yr.  Biodiesel next level tumblr, meh migas forage lomo distillery pabst polaroid kitsch synth tattooed craft beer flannel.  You probably haven't heard of them mustache wolf health goth, ramps kickstarter readymade gluten-free disrupt green juice 3 wolf moon typewriter fashion axe.  Listicle craft beer trust fund, polaroid slow-carb forage portland offal kinfolk before they sold out.  Photo booth cornhole austin tacos, iPhone put a bird on it fixie.  Echo park bespoke gluten-free kombucha, man braid kickstarter direct trade  mixtape wayfarers ramps fixie.  Pabst ramps lomo, hashtag lo-fi schlitz man braid letterpress food truck.</p><p>Migas quinoa cardigan, kickstarter irony freegan blog waistcoat occupy shabby chic cliche asymmetrical locavore dreamcatcher.  Venmo ramps fingerstache 8-bit, distillery before they sold out narwhal single-origin coffee.  Disrupt next level ethical street art, sartorial skateboard man braid quinoa kickstarter gentrify chicharrones.  Tousled hella retro heirloom, cred migas chartreuse cornhole sartorial hashtag raw denim next level intelligentsia brooklyn.  Tattooed food truck disrupt actually skateboard cold-pressed, 8-bit schlitz street art YOLO kale chips.  Bicycle rights wayfarers jean shorts mlkshk, fingerstache irony affogato selvage biodiesel four loko tumblr chillwave flexitarian authentic.  Raw denim chambray yuccie seitan, pabst semiotics mumblecore try-hard gochujang sustainable locavore.</p><p>Art party actually farm-to-table, authentic kale chips cred chambray mumblecore aesthetic semiotics leggings lomo.  Godard umami messenger bag kogi, street art swag craft beer next level celiac marfa hashtag tattooed williamsburg.  Listicle kinfolk farm-to-table thundercats.  Flexitarian kinfolk put a bird on it master cleanse seitan, brunch semiotics banjo pug hashtag.  Polaroid forage truffaut 90's.  Offal food truck occupy, celiac you probably haven't heard of them bushwick direct trade  brunch art party pour-over readymade williamsburg chillwave semiotics.  Affogato yuccie DIY, flannel blue bottle sartorial normcore.</p><p>90's crucifix asymmetrical, dreamcatcher jean shorts pug sriracha humblebrag.  Hoodie mixtape truffaut readymade, craft beer fashion axe ugh tacos food truck pug beard stumptown chia.  Sartorial farm-to-table +1 tilde pug helvetica, affogato man braid try-hard mixtape.  XOXO retro ethical, brunch post-ironic cliche letterpress austin chillwave bicycle rights ramps scenester microdosing neutra literally.  Four dollar toast yuccie YOLO pug.  Banjo echo park tattooed, lo-fi keffiyeh asymmetrical listicle gochujang offal meditation brunch hammock meh chambray.  Asymmetrical health goth swag, cornhole pug jean shorts distillery forage.</p><p>Plaid YOLO sustainable pop-up echo park.  Williamsburg normcore kogi freegan cronut, 8-bit neutra umami venmo narwhal distillery post-ironic chia organic.  Mumblecore gentrify aesthetic authentic narwhal, lomo typewriter crucifix viral kickstarter selfies.  Hoodie crucifix fashion axe literally vice.  Cronut mustache letterpress, bushwick taxidermy kogi seitan you probably haven't heard of them pabst ethical fixie.  Twee try-hard art party, humblebrag next level migas asymmetrical heirloom hoodie kitsch 8-bit sriracha man braid.  Authentic four dollar toast four loko kogi.</p><p>Bespoke mumblecore squid photo booth, ennui jean shorts etsy schlitz deep v meh kombucha brooklyn tofu bicycle rights artisan.  Literally 8-bit organic cardigan, blue bottle offal squid yuccie.  Lo-fi microdosing XOXO everyday carry.  Four loko pork belly ugh, cold-pressed butcher paleo cred tousled wayfarers everyday carry chambray cornhole synth letterpress.  Celiac listicle helvetica before they sold out squid etsy offal, keytar waistcoat truffaut wayfarers cardigan aesthetic 3 wolf moon quinoa.  Normcore vice chillwave, keffiyeh beard leggings cold-pressed salvia williamsburg flexitarian cardigan.  Banh mi etsy kombucha, swag leggings readymade green juice raw denim hammock keffiyeh.</p><p>Crucifix taxidermy keytar listicle seitan, austin thundercats actually messenger bag fanny pack intelligentsia tumblr kale chips tacos ugh.  Paleo blue bottle microdosing semiotics.  PBR&amp;B semiotics beard direct trade, venmo fixie bitters slow-carb gluten-free drinking vinegar chicharrones literally fanny pack blue bottle.  Listicle portland fanny pack, forage keffiyeh scenester poutine gluten-free slow-carb kickstarter whatever distillery godard meditation.  Farm-to-table fashion axe gentrify 3 wolf moon, cliche kitsch four dollar toast single-origin coffee pitchfork umami.  Tumblr meditation stumptown, banh mi lo-fi freegan blue bottle polaroid tousled asymmetrical lumbersexual bushwick art party mixtape.  Forage quinoa gentrify pour-over, hoodie brooklyn lumbersexual.</p><p>Art party distillery heirloom four dollar toast fingerstache craft beer occupy plaid whatever, blue bottle locavore twee.  Slow-carb irony pickled pitchfork, DIY messenger bag cardigan direct trade  sartorial austin.  Cliche poutine irony helvetica pinterest.  VHS master cleanse whatever, gentrify scenester cornhole mlkshk.  Tattooed +1 tote bag kinfolk kitsch, vice affogato VHS chicharrones microdosing ugh.  Seitan organic butcher, waistcoat selfies chartreuse biodiesel locavore man bun hammock intelligentsia leggings.  Affogato skateboard artisan, cornhole shabby chic disrupt keytar sartorial sustainable fingerstache whatever paleo try-hard.</p><p>Salvia listicle pabst crucifix post-ironic tattooed.  Crucifix leggings bitters selfies sustainable, four loko echo park paleo vinyl everyday carry kombucha.  Cray etsy street art pop-up, brooklyn migas irony bespoke chillwave austin skateboard sriracha.  Forage paleo next level freegan quinoa, venmo blog chicharrones gastropub.  Asymmetrical shoreditch trust fund whatever post-ironic heirloom.  VHS mixtape chambray venmo ramps austin.  Crucifix cronut YOLO, mixtape pour-over hoodie locavore farm-to-table cred marfa wolf tacos put a bird on it.</p><p>Irony paleo DIY, street art pitchfork brooklyn migas butcher yuccie try-hard food truck biodiesel tofu yr whatever.  Before they sold out pork belly sriracha twee food truck, taxidermy chillwave ethical 3 wolf moon keytar chicharrones try-hard.  Pabst chia bespoke next level, asymmetrical occupy tousled meh cornhole master cleanse pork belly.  Gentrify waistcoat poutine direct trade  3 wolf moon crucifix.  Mlkshk single-origin coffee fixie jean shorts swag dreamcatcher, keytar kogi celiac lo-fi locavore blue bottle narwhal.  Direct trade  ramps banjo letterpress polaroid lumbersexual.  Kombucha food truck hashtag, seitan messenger bag 90's 3 wolf moon intelligentsia keffiyeh pabst tattooed banjo.</p><p>Semiotics mixtape man bun YOLO, vegan etsy meh 90's cray photo booth knausgaard cronut you probably haven't heard of them.  XOXO tumblr cray, you probably haven't heard of them skateboard pug tilde post-ironic bitters wolf mlkshk blue bottle.  Cronut schlitz tousled whatever, skateboard synth gochujang locavore listicle ennui +1 pork belly authentic brooklyn.  Ethical small batch next level pour-over.  Microdosing beard drinking vinegar, migas readymade cold-pressed mustache viral XOXO neutra organic pug.  Single-origin coffee fanny pack keffiyeh, pug kickstarter shoreditch cronut affogato.  You probably haven't heard of them offal put a bird on it, kale chips listicle everyday carry thundercats jean shorts lumbersexual.</p><p>Mixtape 8-bit readymade, tumblr blue bottle umami chillwave locavore four dollar toast.  YOLO pork belly locavore vinyl.  Migas XOXO PBR&amp;B echo park, mumblecore kitsch slow-carb freegan bicycle rights flexitarian put a bird on it pour-over.  Lo-fi sustainable waistcoat marfa, squid cronut mustache swag umami.  Celiac pop-up whatever farm-to-table green juice williamsburg.  Blue bottle cardigan taxidermy heirloom, disrupt kogi DIY.  Chillwave direct trade  paleo, tacos sriracha vinyl retro hoodie gastropub tumblr 90's master cleanse.</p><p>Post-ironic selvage godard tilde.  Vegan kombucha small batch literally before they sold out VHS.  Tacos bitters venmo ugh literally pork belly, gentrify whatever ennui poutine typewriter heirloom.  Messenger bag blue bottle farm-to-table typewriter mlkshk.  Gluten-free chicharrones kitsch flannel.  Schlitz ethical keffiyeh portland, irony hella single-origin coffee meditation letterpress twee man braid XOXO trust fund kale chips sartorial.  Tattooed photo booth meggings XOXO, flexitarian polaroid actually whatever squid butcher selvage messenger bag narwhal hashtag keytar.</p><p>Polaroid hoodie mumblecore meggings.  Pinterest master cleanse plaid slow-carb.  Leggings chartreuse franzen, craft beer meditation poutine sriracha.  Godard disrupt echo park viral, cold-pressed mustache single-origin coffee affogato typewriter tofu.  Beard try-hard celiac, gentrify direct trade  flannel four dollar toast authentic.  Small batch ugh freegan vinyl sartorial bushwick.  Direct trade  vinyl mustache distillery.</p><p>Selfies chillwave yuccie, messenger bag blog banjo authentic art party disrupt put a bird on it semiotics vegan.  Knausgaard photo booth tattooed, jean shorts wayfarers stumptown raw denim 3 wolf moon green juice actually.  Venmo DIY you probably haven't heard of them cornhole, swag bespoke tousled hashtag.  Disrupt helvetica tattooed meh jean shorts wolf.  Ethical skateboard yr chambray.  Lo-fi pabst small batch twee tacos hashtag.  Knausgaard williamsburg gochujang twee sartorial, small batch readymade shoreditch church-key salvia.</p><p>Deep v aesthetic street art next level, flannel sartorial slow-carb fanny pack health goth mustache meggings blog bicycle rights.  Artisan hella paleo art party austin cronut.  Church-key trust fund intelligentsia mixtape raw denim man braid.  Migas hella DIY shabby chic.  Semiotics post-ironic echo park, organic food truck knausgaard slow-carb yuccie man bun skateboard 8-bit mlkshk.  Pickled post-ironic swag, craft beer brooklyn organic fashion axe.  Umami pour-over squid pitchfork pinterest asymmetrical, chia pabst twee gochujang polaroid drinking vinegar.</p><p>Plaid knausgaard semiotics, irony shoreditch cornhole next level distillery polaroid freegan mixtape messenger bag keffiyeh.  Stumptown tacos cronut, marfa fingerstache semiotics franzen brooklyn.  DIY venmo four loko, kitsch sriracha keffiyeh godard brooklyn readymade irony.  Everyday carry trust fund put a bird on it, ennui brooklyn pour-over ethical vice lomo portland.  Affogato synth franzen keffiyeh knausgaard humblebrag wayfarers man braid.  Cornhole migas sartorial brunch knausgaard, narwhal scenester flexitarian four dollar toast stumptown godard.  Direct trade  salvia fixie occupy waistcoat everyday carry ramps green juice stumptown.</p><p>Aesthetic deep v cliche, chartreuse gochujang locavore master cleanse taxidermy waistcoat pickled.  Sartorial twee banjo forage, mixtape photo booth selvage keffiyeh freegan next level food truck.  Slow-carb etsy normcore, helvetica church-key freegan tumblr PBR&amp;B brunch cliche beard waistcoat.  Microdosing trust fund meditation, tote bag austin truffaut polaroid PBR&amp;B humblebrag leggings.  Taxidermy iPhone cardigan lomo banh mi.  Pour-over next level twee, fashion axe raw denim forage crucifix swag salvia keffiyeh waistcoat portland four dollar toast godard.  Bespoke wolf mixtape fanny pack intelligentsia you probably haven't heard of them.</p><p>Four loko humblebrag pickled ramps, deep v freegan lumbersexual plaid cred.  Narwhal fap readymade, green juice intelligentsia irony tumblr hella.  Cold-pressed yuccie shoreditch, knausgaard DIY ennui salvia beard.  Tote bag XOXO readymade freegan before they sold out.  Cred squid chillwave cardigan.  Migas scenester asymmetrical, DIY direct trade  tote bag stumptown cold-pressed XOXO narwhal next level banh mi celiac.  Shabby chic cred truffaut bespoke, single-origin coffee paleo pitchfork chambray gentrify godard umami meditation wayfarers wolf direct trade.</p><p>Thundercats chambray whatever, meditation gentrify mustache biodiesel banh mi pitchfork bitters bicycle rights hashtag skateboard.  Before they sold out tote bag lo-fi, poutine mlkshk 8-bit swag celiac.  Whatever actually meggings selvage man braid tumblr thundercats ethical lomo.  Flannel iPhone typewriter kale chips post-ironic quinoa.  Mixtape poutine viral retro.  Seitan hoodie before they sold out, austin dreamcatcher disrupt yuccie neutra fap master cleanse swag you probably haven't heard of them tilde.  Crucifix migas lomo art party, cardigan four loko offal kombucha salvia.</p><p>Knausgaard retro before they sold out slow-carb leggings.  Pickled post-ironic swag literally trust fund aesthetic.  Letterpress master cleanse salvia franzen williamsburg.  Hammock taxidermy roof party health goth, before they sold out 90's deep v.  DIY small batch before they sold out banjo sartorial franzen.  Typewriter portland neutra, tumblr craft beer vice sriracha chillwave pitchfork before they sold out fingerstache synth skateboard disrupt celiac.  Neutra plaid forage, humblebrag pop-up polaroid chartreuse.</p><p>Artisan kinfolk man bun cray sartorial you probably haven't heard of them, fashion axe messenger bag.  Paleo before they sold out freegan, health goth lo-fi vinyl kale chips marfa swag keffiyeh.  Kogi cliche blog four loko.  Fanny pack celiac crucifix, ugh tilde cornhole sartorial.  Salvia helvetica keytar distillery tumblr, photo booth cold-pressed.  Cray pour-over single-origin coffee wolf drinking vinegar irony put a bird on it fanny pack, trust fund mustache franzen blog selvage poutine butcher.  Post-ironic schlitz deep v venmo chambray pop-up, occupy affogato street art everyday carry kombucha gastropub.</p><p>Salvia trust fund cray, cliche pour-over migas narwhal ennui flannel.  Keytar echo park hashtag, pop-up portland whatever polaroid migas shoreditch cred helvetica.  Pinterest asymmetrical skateboard XOXO jean shorts.  Bespoke humblebrag salvia pickled vegan sartorial, +1 mixtape iPhone tote bag pitchfork.  Fixie affogato schlitz tofu art party everyday carry whatever, normcore knausgaard humblebrag offal cred brunch lumbersexual fap.  Pour-over craft beer readymade mixtape, umami banh mi man bun hashtag YOLO meh letterpress pickled church-key.  Crucifix tilde locavore retro.</p><p>Synth everyday carry normcore, irony ethical chartreuse tumblr farm-to-table meditation.  Church-key sriracha beard cardigan ugh, VHS heirloom crucifix.  Leggings affogato fixie austin mumblecore taxidermy VHS, cronut offal umami portland tilde food truck tumblr.  Offal fingerstache fixie, chartreuse four loko banjo vegan yr ugh stumptown.  Lumbersexual narwhal pinterest pour-over marfa, neutra church-key offal cliche fingerstache ramps four loko asymmetrical.  Tofu you probably haven't heard of them kitsch, fixie stumptown four loko poutine locavore.  PBR&amp;B street art godard green juice, occupy dreamcatcher marfa kickstarter waistcoat offal authentic kitsch banjo.</p><p>Kickstarter plaid trust fund, fingerstache viral letterpress roof party taxidermy yuccie lumbersexual disrupt godard.  Blue bottle vegan food truck lumbersexual, cliche blog fingerstache small batch intelligentsia XOXO fashion axe forage kale chips 8-bit.  Small batch williamsburg truffaut, godard VHS vice pitchfork lo-fi 90's try-hard austin shabby chic quinoa meh chillwave.  Readymade keffiyeh locavore fixie thundercats, heirloom tofu direct trade.  Waistcoat semiotics brunch direct trade, echo park meh gochujang 3 wolf moon listicle etsy.  Deep v kogi kinfolk, before they sold out drinking vinegar lo-fi meditation plaid literally tofu vice tumblr whatever cardigan ugh.  Messenger bag quinoa wolf pour-over, literally skateboard tofu cliche pop-up fashion axe flannel selfies.</p><p>Church-key meh iPhone, lumbersexual neutra bitters kickstarter flexitarian scenester wolf marfa.  Typewriter +1 actually mustache PBR&amp;B.  Farm-to-table kinfolk dreamcatcher kogi keytar tousled venmo.  Hoodie 8-bit everyday carry, DIY scenester fixie plaid.  Master cleanse direct trade  ethical gluten-free, skateboard 3 wolf moon art party street art narwhal deep v cornhole you probably haven't heard of them disrupt knausgaard.  Vegan skateboard microdosing godard cornhole, tofu offal kale chips.  Kale chips ugh tattooed portland, pour-over keffiyeh XOXO shabby chic biodiesel schlitz artisan normcore affogato.</p><p>Green juice next level organic williamsburg.  Four loko cornhole meggings DIY iPhone, blog letterpress seitan.  Hashtag cornhole fashion axe, blog waistcoat try-hard green juice tilde venmo distillery next level mustache kickstarter.  Polaroid pug meh, helvetica tousled viral brunch sriracha +1 synth cornhole pabst stumptown sartorial small batch.  Thundercats occupy venmo, waistcoat synth tattooed neutra green juice gochujang gluten-free fingerstache kombucha bitters meditation.  Pork belly cornhole polaroid, meggings literally messenger bag fanny pack.  Occupy cornhole forage, squid letterpress keytar echo park farm-to-table post-ironic vegan.</p></div>

</div>
              
            
!

CSS

              
                @import 'lesshat';

// Relevant code to make this work

.header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  &.fixed {
    position: fixed;
  }  
}

.container {
  padding-top: 70px;
}

// General styling - i.e. not important

.container {
  max-width: 700px;
  margin: 0 auto;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}

header {
  background-color: #584EBF;
  color: white;
  text-align: center;
  padding: 20px 0;
  .box-shadow(0 1px 1px rgba(0, 0, 0, 0.4));

  // An attempt to prevent various browser 'flickering bugs' e.g. on mobile
  .transform(translate3d(0px,0px,0px));
  .backface-visibility(hidden);
  .transform-style(preserve-3d);
}

.hint {
  background-color: #48B748;
  padding: 10px 15px;
  text-align:center;
  color: white;
  font-weight: lighter;
  font-size: 14px;
}
              
            
!

JS

              
                // Getting the scroll top of the passed string element i.e. wouldn't work if you had multiple header elements in the page.
const getScrollTop = (el) => {
  return document.querySelector(el).scrollTop;
}

const header = document.querySelector('.header');
let previousScroll = getScrollTop('body'),
    isAbsolute = true;

const scrollEvent = (e) => {
    
  // The new scrolling position
  const newScroll = getScrollTop('body'),
        headerClientHeight = header.clientHeight,
        headerOffsetTop = header.offsetTop,
        fixedClass = 'fixed';
  
  
  if ( newScroll < previousScroll && (headerClientHeight + headerOffsetTop) < newScroll && isAbsolute ) {

    // If we are scrolling up, place it above the viewport so that it can slide and reveal 
    header.style.top = `${newScroll - headerClientHeight}px`;

    
  } else if ( newScroll <= headerOffsetTop && isAbsolute ) {
    
    // We have reached the top of the header, so fix it!
    header.style.top = 0;
    header.classList.add( fixedClass );
    isAbsolute = false;
    
  } else if ( newScroll > previousScroll  && !isAbsolute ) {
    
    // We are scrolling down again so add the top position to be the current scroll
    // and remove fixed. This gives the appearance that we are just leaving it there
    // as it slides out of view.
    header.style.top = `${newScroll}px`;
    header.classList.remove( fixedClass );
    isAbsolute = true;
    
  }
  
  // Set the scroll for comparison on the next scroll event
  previousScroll = newScroll;
  
};

document.addEventListener('scroll', scrollEvent);

              
            
!
999px

Console