cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <header>
  <h1>Fixed Navigation Example</h1>
</header>
<nav>Actions: <a href="#">Save</a> | <a href="#">Delete</a> | <a href="#">Destroy</a></nav>
<main>
  <p>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ut, ad, rerum! Hic suscipit inventore at culpa quia laborum, reiciendis aspernatur, tempora praesentium harum, ipsum dolorem unde, explicabo quibusdam quidem. Explicabo.</span>
    <span>At vero assumenda sed praesentium, cum maxime fugiat quod blanditiis veritatis, numquam. Vitae rerum odio accusamus excepturi facilis quis obcaecati quisquam dolorum modi quam! Exercitationem eveniet sapiente iure voluptatem nesciunt.</span>
    <span>Sunt, molestiae, velit. Deserunt nesciunt laboriosam et sunt incidunt neque dolorum hic totam, ipsa, ab earum nam quas eveniet illo aliquid omnis deleniti. Quaerat consectetur voluptatibus eius tenetur magnam iusto.</span>
    <span>Doloremque, sequi ad enim nisi fuga quibusdam saepe necessitatibus, consectetur a! Laudantium fugit sequi nemo, dolorum molestiae nam, provident veniam eligendi eos, obcaecati, commodi ea atque voluptates repudiandae ipsum veritatis.</span>
    <span>Illo, numquam, ut. Repellat ab amet cum porro perspiciatis consequuntur dolorum inventore ut, distinctio! Maxime iusto dolores eos, aperiam vero natus sed pariatur temporibus voluptatem, blanditiis aliquid cumque commodi rerum.</span>
    <span>Nulla laboriosam numquam quos consectetur animi cum quaerat dicta possimus, ipsa maxime. Veritatis earum mollitia, ratione ipsam autem odio facere quasi, ut minus aliquam soluta beatae in necessitatibus, nemo reiciendis.</span>
    <span>Cupiditate, optio dicta eaque voluptas similique quisquam ullam debitis quae! Laudantium, quam dolores eum nobis hic? Amet iusto deleniti officiis suscipit debitis! Mollitia doloribus nam earum odio laudantium odit exercitationem.</span>
    <span>Voluptate possimus dolorem voluptas earum sed soluta nemo delectus omnis ut. Laboriosam ipsam nihil, est itaque voluptates quod dolores, numquam architecto rerum cumque natus ea sapiente perspiciatis mollitia veritatis eum.</span>
    <span>Minima facilis, porro cupiditate quas sunt reiciendis. Corrupti pariatur aut est vero recusandae optio laboriosam, fuga excepturi perferendis, atque iusto, harum, iste repellendus doloribus. Doloremque aperiam quo, sunt quisquam accusantium?</span>
    <span>Quasi incidunt ipsum at deserunt doloribus consectetur quaerat, quidem fuga sunt repudiandae molestias eum perspiciatis laboriosam tempore culpa beatae quam neque nobis officiis vitae impedit quisquam ad rerum nostrum! Iure.</span>
  </p>
  <p>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum vel reprehenderit pariatur illo, similique. Ad necessitatibus vitae quod, neque magni facilis libero, eveniet itaque doloribus dignissimos eum nemo distinctio numquam!</span>
    <span>Cupiditate odio aspernatur expedita voluptas ipsam facilis deserunt doloribus, nobis, temporibus dolore sapiente necessitatibus ex adipisci tempora, beatae rem ipsum inventore. Recusandae fuga numquam, dicta alias ipsum, nesciunt deserunt doloremque.</span>
    <span>Quam iusto officia, fuga accusamus minus distinctio error corporis? Aut saepe aliquam unde magni magnam officiis, harum placeat quasi error, hic a cum consectetur suscipit sint dolorem quidem beatae. Pariatur.</span>
    <span>Illum accusamus quis molestias dolorem quod excepturi, hic fugit ad ex facere voluptatum assumenda sint eos corrupti totam laborum blanditiis dicta dignissimos sapiente delectus. Voluptatem incidunt, architecto eos assumenda optio.</span>
    <span>Quisquam soluta, dolorum sequi nobis nostrum illum placeat possimus corporis rem vero recusandae quis ducimus cum animi incidunt debitis facilis repellendus, magnam excepturi, veniam, fuga reiciendis. Velit aliquam, et excepturi!</span>
    <span>Odit fugit nostrum rem exercitationem magnam nemo eaque officiis iure voluptas accusantium. Voluptatum eos quam ducimus mollitia impedit facilis dignissimos laudantium aliquam. Quas numquam rerum reiciendis maiores non, iusto commodi.</span>
    <span>Mollitia officia voluptas nobis, quam voluptatibus cupiditate aliquam unde doloribus distinctio ipsum velit possimus! Veniam earum, animi modi consequatur iure impedit mollitia asperiores iusto tenetur dignissimos aliquid, deserunt doloribus eos.</span>
    <span>Voluptates incidunt consequuntur hic laudantium labore quis? Magnam sequi, fugiat iure, saepe quisquam neque voluptate, laborum autem ad non ducimus quidem debitis a pariatur dicta, optio quis! Alias, minima, dolore!</span>
    <span>Suscipit, quisquam sed. Nihil, accusamus magnam, ad consequatur sunt perspiciatis quod laborum libero temporibus quis nostrum maxime ab voluptas? Sed dolore magnam praesentium aliquam pariatur, aperiam fugiat animi, quasi quisquam.</span>
    <span>Pariatur nam tenetur reprehenderit commodi, aliquam sequi porro quos sed vel consectetur, voluptatibus, facere voluptatem iste itaque excepturi dolorum dignissimos incidunt repellat. Neque quidem eius vel iusto molestiae? Tempora, facilis.</span>
  </p>
  <p>
    <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Excepturi quos pariatur sequi, ratione illo dignissimos doloremque laudantium beatae, iste voluptate ullam consequatur! Est, facilis sint sunt eos. Odit, facere maiores.</span>
    <span>Possimus suscipit aliquid dolores optio eaque aut corrupti iure quis impedit officia sed neque repudiandae molestiae sequi velit eos quibusdam at reprehenderit fuga, sunt deleniti voluptatem mollitia, iste, nostrum. Quos.</span>
    <span>Ducimus eligendi, perferendis earum suscipit harum reprehenderit iusto asperiores ea modi saepe nobis odit placeat doloremque odio voluptatum explicabo. Numquam id, perferendis nam. Alias fuga dolorem sed quod consectetur, quos.</span>
    <span>Expedita velit sequi laborum laudantium amet excepturi, beatae adipisci cupiditate quis, provident ut nihil deleniti minus nam, rerum mollitia neque odio ratione. Earum, velit. Laudantium quas, ipsum reiciendis alias consequuntur!</span>
    <span>Temporibus error molestiae hic, vitae delectus eos libero! Vitae accusantium corporis doloribus quia, minus cumque nam, velit laudantium illo fugiat explicabo odit tenetur accusamus nostrum quibusdam veritatis nulla ullam illum.</span>
    <span>Obcaecati reprehenderit voluptatibus animi dolorem iste reiciendis sit ut, distinctio alias facilis ipsa quidem optio, delectus nemo, provident omnis est laboriosam velit perferendis. Dicta nostrum tempora a ipsum, iste! Minima.</span>
    <span>Accusantium est nulla laboriosam quisquam aspernatur optio nesciunt obcaecati unde dolorem molestiae et voluptatum sapiente eveniet officiis fugiat maxime, maiores ab commodi a. Voluptatem repudiandae, magni quaerat necessitatibus consectetur incidunt.</span>
    <span>Aperiam eaque, repellendus ipsam error laborum doloribus similique. Esse cupiditate totam dolorum, ex id beatae debitis, soluta dignissimos alias enim. Itaque adipisci reprehenderit neque deleniti ratione laborum nemo inventore fugiat.</span>
    <span>Unde velit magni labore quos placeat reprehenderit rem itaque doloribus, quisquam provident quia, doloremque, corporis molestiae, beatae voluptates id est. Voluptatum blanditiis modi accusamus odit quae distinctio sapiente esse sunt.</span>
    <span>Molestiae placeat non iusto unde, adipisci ex ullam doloremque, optio, numquam aspernatur autem. Maxime reiciendis quas neque cum nobis. Iusto exercitationem autem sit soluta aperiam accusantium rem delectus maiores maxime?</span>
  </p>
</main>

            
          
!
            
              $navHeight: 30px;
$navPaddingTB: $navHeight / 2;
$navPaddingLR: 10px;
$navHeight: 40px;

nav {
  padding: $navPaddingTB $navPaddingLR;
  margin-bottom: 1.65em;
  background-color: pink;
  box-sizing: border-box;
}

 .nav-body-fixed {
    padding-top: $navHeight;
  }
  
.fixed {
  position: fixed;
  left: 0; top: 0;
  width: 100%;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}


/** Simulating Scroll */

main {
  padding: 8px 10px;
}


            
          
!
            
              // I'm too lazy to type document and window all the time.
const [doc, win] = [document, window];

/**
 * Window Offset module
 * Exposes an API that allows you to determine the windows x or y offset
 * example:
 * winOffset.x() // gets the x offset
 * winOffset.y() // gets the y offset
 */
var winOffset = (()=>{
 	
  // Determine what browser we're dealing with here.
  const isCSS1Compat  = ((doc.compatMode || '') === 'CSS1Compat');
	
  // Determine if the browser is awesome
  const supportPageOffset = win.pageXOffset !== undefined;
  
  var fn =  { x: () => win.pageXOffset, y: () => win.pageYOffset };
  
  // If browser supports offset, go with it!
  if(supportPageOffset) { return fn };
  
  // Browser dumb
  var docCompat = isCSS1Compat ? doc.documentElement : doc.body;
  
  fn.x = () => docCompat.scrollLeft;
  fn.y = () => docCompat.scrollTop;
	
  // Browser dumb. Helper return
  return fn;
  
})();

/**
 * Fixed Navigation Module
 */
class FixedNav {
  
  // Class property.
  // If you don't like fixed or nav-body-fixed, change them here.
  get cls() {
    return {
      nav: 'fixed',
      body: 'nav-body-fixed'
     };
  }
  
  /** 
   * Construct the fixed nav module
   * @param {Element} el
   */
  constructor(el){
    this.el = el;
    this.body = doc.body;
  	this.navOffset = this.el.offsetTop;
    this.bind();
    this.build();
  }
 	/**
   * Bind to the window scroll event and call build when it happens.
   */
  bind() {
    win.addEventListener('scroll', this.build.bind(this));
  }
  
  /**
   * Update the class property on the fixed nav module
   *   depending on the scroll offset.
   */
  build() {
    var [nav, body] = [this.cls.nav, this.cls.body];
    if(winOffset.y() > this.navOffset) {
      this.el.classList.add(nav);
      this.body.classList.add(body);
    } else {
      this.el.classList.remove(nav);
      this.body.classList.remove(body);
    }
  }
}

// Create the Fixed Navigation module.
new FixedNav(doc.querySelector('nav'));

            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console