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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import or require. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              - var sections = ['news', 'project', 'space', 'pricing', 'contact']

header
  h1 Vanilla Sticky Menu
  h2 With extra sweetened slide-out flavor
  input(type='checkbox', name='trigger')
  nav.original
    for i in sections
      a(href= '#' + i, data-scroll)= i
    a(href='#footer', data-scroll) Footer
    label(for='trigger')

for i in sections
  section(id= i)
    .contentWrap
      h3= 'This is the ' + i + ' section'
      p Vivamus elementum justo et neca mi fermentum imperdiet. Curabitur cursus lacus in finibus lobortis. Proin tincidunt neon lacus id rhoncus vestibulum. Vivamus ultricies diam vel lobortis ultrices. Nunc luctus neque at tellus tincidunt vestibulum om. Phasellus tempus at neque a condimentum. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia.
      a.button= i
footer#footer Thank you for scrolling!
            
          
!
            
              @import compass

@import url(https://fonts.googleapis.com/css?family=Ubuntu:400,700)

$grey: hsla( 0, 0, 0, .85 )
$teal: hsla( 167, 050, 51, 1 )

body, html
  height:           100%
  
body
  text-align:       center
  font-family:      Ubuntu, sans-serif
  font-size:        18px
  text-shadow:      1px 1px 1px rgba(0,0,0,0.004)
  -moz-osx-font-smoothing: grayscale
  -webkit-font-smoothing:	antialiased
  font-smoothing:   antialiased
  color:            $grey

header
  height:           100%
  color:            white
  +box-shadow(inset 0 20px 0 0 #44c1a5)
  +flexbox(( display: box, box-orient: vertical, box-pack: center ), $version: 1)
  +flexbox(( display: flexbox, flex-direction: column, justify-content: center), $version: 2)
  +flexbox((display: flex, flex-direction: column, justify-content: center))
  +background(linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1)), url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/tweed.png) repeat fixed)
    
h1
  margin:            0
  padding:           0
  
h2
  font-size:        1.13em
  font-weight:      300
  margin:           0
  padding:         .4em 0 4em
  &:after
    content:        ''
    position:       absolute
    height:         2px
    width:          60%
    margin-top:     4rem
    left:           20%
    background-color: $teal
  
h3
  margin:           0 auto 2em
  font-size:        1.5em
  text-transform:   uppercase
  &:after
    content:        ''
    position:       absolute
    left:           20%
    width:          60%
    height:         1px
    margin-top:     2em
    background-color: white
  
input[name='trigger']
  position:         absolute
  left:            -100vw

label[for='trigger']
  display:          block
  background-color: $teal
  opacity:          0
  height:           3px
  color:            white
  font-size:        1.3em
  line-height:      0
  margin:           0
  padding:          0
  border-bottom:    none
  cursor:           default
  text-align:       center
  +transition(all .5s)
  &.stickToTop
    opacity:        1
    cursor:         default
  &.hideFromUser
    height:         20px
    cursor:         pointer
    &:before
      content:      ''
      width:        1rem
      height:       1px
      background:   white
      position:     absolute
      margin:      .6rem 0 0 -.5rem

nav.showToUser > label[for='trigger']
  cursor:           n-resize
      
nav
  top:              59%
  width:            100%
  margin:           0
  padding:          0
  background-color: none
  line-height:      1rem
  &:not(.hide) a
    +transition(all .2s)
  a
    font-size:     .95rem
    display:        inline-block
    cursor:         pointer
    margin:         1rem .5em
    font-weight:    400
    text-transform: capitalize
    text-decoration: none
    color:           white
    +single-box-shadow(0, 1px, 0, null, hsla(0,0,0,0))
    &:hover, &.active
      color:        $teal
    &:focus
      +single-box-shadow(0, 1px, 0, null, $teal)
      outline:      0

.cloned
  position:         fixed
  top:              0
  margin-top:       0
  z-index:          900
  width:            100%
  opacity:          0
  visibility:       hidden
  a
    color:          $grey
    +transition(all .2s)
  &.stickToTop
    top:            0
  &.hideFromUser
    margin-top:    -3rem
    
.bgw
  background-color: rgba(255,255,255,1)
  
.bgn
  background-color: rgba(255,255,255,0)
    
.hide
  visibility:       hidden
  a
    color:          transparent

.original.hide + .cloned
  visibility:       visible
  opacity:          1
  +transition(all 0.3s)
    
section
  height: 100%
  background-color: $teal
  padding:          0
  color:            white

section:nth-of-type(even)
  background-color: $grey
  +background(url(http://subtlepatterns2015.subtlepatterns.netdna-cdn.com/patterns/debut_dark.png) repeat)
  .button:hover
    color:          $grey

.contentWrap
  position:         relative
  top:              50%
  +transform(translateY(-50%))
    
p
  text-align:       left
  max-width:        60%
  font-weight:      300
  margin:           0 auto
  text-align:       justify
  word-break:       break-all
  hyphenation:      auto
  
.button
  display:          inline-block
  margin:           3em auto 0
  padding:          1em 3em
  border:           solid 2px white
  text-transform:   capitalize
  +border-radius(3px)
  +transition(all .3s)
  &:hover
    background-color: white
    color:          $teal
    cursor:         pointer
  
#footer
  display:          inline-block
  width:            100%
  padding:          5rem 0
            
          
!
            
              /*
Inspired by Mark Senff: > https://codepen.io/senff/
and his pen 'Sticky menu on scroll' > https://codepen.io/senff/pen/ayGvD'
Recoded to vanilla JavaScript */

(function() {

  // Create a clone of nav and give it classes:
  document.querySelector('nav').parentNode.insertBefore(document.querySelector('nav').cloneNode(true), null).className='cloned bgn bgw'

  const slideOutHeight = 850,
        clone          = document.querySelector('.cloned'),
        originalNav    = document.querySelector('.original'),
        label          = clone.querySelector('label[for="trigger"]'),
        navPosition    = originalNav.offsetTop,
        anchors        = document.querySelectorAll('nav a')

  var   anchorsArray   = []

  // Push anchor's hrefs into the array
  for (var i = 0; i < anchors.length; i++) {
    const anchor = anchors[i],
          ahref  = anchor.getAttribute('href')
    anchorsArray.push(ahref)
  }

  // Functions to call when user scrolls
  window.onscroll = function() {

    const scrollPosition = window.pageYOffset,
          sections       = document.querySelectorAll('section'),
          windowHeight   = window.innerHeight,
          docHeight      = document.documentElement.offsetHeight

    // Anchor highlighting: (Credits to Nick Salloum, recoded to vanilla JavaScript from http://callmenick.com/post/single-page-site-with-smooth-scrolling-highlighted-link-and-fixed-navigation)
    for (var i = 0; i < anchorsArray.length; i++) {
      // Loop over anchor's href tags and set classes
      var theID     = anchorsArray[i], // e.g. '#about'
          divTop    = document.querySelector(theID).offsetTop, // e.g. ('#about').offsetTop -> 2200 (px)
          divHeight = document.querySelector(theID).offsetHeight // e.g. ('#about').offsetHeight -> 600 (px)

      if (scrollPosition >= divTop && scrollPosition < (divTop + divHeight)) {
        // only if the viewport is scrolled beyond the div's top border and still before the div's bottom border
        document.querySelector('nav.cloned a[href="' + theID + '"]').classList.add('active')
      } else {
        document.querySelector('nav.cloned a[href="' + theID + '"]').classList.remove('active')
      }
    }

    // Navigation stick and slide rules:
    if (scrollPosition > (navPosition + slideOutHeight)) {
      // Scroll is extended past the set height; slide out the menu:
      clone.classList.add('hideFromUser')
      label.classList.add('hideFromUser')
      // check for document end, doesn't work on codepen due to iframe
      if (scrollPosition + windowHeight == docHeight && !document.querySelector('nav.cloned a:last-of-type').classList.contains('active') ) {
        // only if the viewport bottom tops with the document bottom and last anchor doesn't have class 'active'
        var currentActive = document.querySelector('nav.cloned a.active').getAttribute('href')
        document.querySelector('nav.cloned a[href="' + currentActive + '"]').classList.remove('active')
        document.querySelector('nav.cloned a:last-of-type').classList.add('active')
      } //
    } else if (scrollPosition >= navPosition) {
      // Scrolled past the original position; only show the cloned, sticky element:
      originalNav.classList.add('hide')
      clone.className = 'cloned bgw'
      label.className = 'stickToTop'
    } else {
      // Not scrolled past the menu, only show the original menu:
      originalNav.classList.remove('hide')
      label.classList.remove('stickToTop')
      clone.classList.add('bgn')
    } //

  } // <- End scroll events

  // Label click event:
  document.querySelector('.cloned label[for="trigger"]').addEventListener('click', function(e) {
    
    e.preventDefault()
    const navPosition = document.querySelector('.original').offsetTop
    
    // Only if navigation has already slid up:
    if (window.pageYOffset > (navPosition + slideOutHeight) && !(clone.classList.contains('hideFromUser')) ) {
      // Open and change cursor:
      clone.classList.add('hideFromUser')
      setTimeout(function() {
        clone.classList.remove('showToUser')
      }, 200)
    // If navigation is open beyond that point:
    } else if (window.pageYOffset > (navPosition + slideOutHeight)) {
      // Close and change cursor:
      clone.classList.remove('hideFromUser')
      setTimeout(function() {
        clone.classList.add('showToUser')
      }, 200)
    }
  })

  // Anchor click event to remove label class
  for (var i = 0; i < anchors.length; i++) {
    anchors[i].addEventListener('click', function(e) {
      clone.classList.remove('showToUser')
    })
  };

  // Have to paste this here due to github not allowing hotlinking anymore
  /*! smooth-scroll v11.0.2 | (c) 2017 Chris Ferdinandi | GPL-3.0 License | https://github.com/cferdinandi/smooth-scroll */
  !(function(e,t){"function"==typeof define&&define.amd?define([],t(e)):"object"==typeof exports?module.exports=t(e):e.smoothScroll=t(e)})("undefined"!=typeof global?global:this.window||this.global,(function(e){"use strict";var t,n,o,r,a,i,c,l={},s="querySelector"in document&&"addEventListener"in e,u={selector:"[data-scroll]",selectorHeader:null,speed:500,offset:0,easing:"easeInOutCubic",easingPatterns:{},before:function(){},after:function(){}},f=function(){var e={},t=!1,n=0,o=arguments.length;"[object Boolean]"===Object.prototype.toString.call(arguments[0])&&(t=arguments[0],n++);for(;n<o;n++){var r=arguments[n];!(function(n){for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(t&&"[object Object]"===Object.prototype.toString.call(n[o])?e[o]=f(!0,e[o],n[o]):e[o]=n[o])})(r)}return e},d=function(e){return Math.max(e.scrollHeight,e.offsetHeight,e.clientHeight)},h=function(e,t){for(Element.prototype.matches||(Element.prototype.matches=Element.prototype.matchesSelector||Element.prototype.mozMatchesSelector||Element.prototype.msMatchesSelector||Element.prototype.oMatchesSelector||Element.prototype.webkitMatchesSelector||function(e){for(var t=(this.document||this.ownerDocument).querySelectorAll(e),n=t.length;--n>=0&&t.item(n)!==this;);return n>-1});e&&e!==document;e=e.parentNode)if(e.matches(t))return e;return null},m=function(e){"#"===e.charAt(0)&&(e=e.substr(1));for(var t,n=String(e),o=n.length,r=-1,a="",i=n.charCodeAt(0);++r<o;){if(0===(t=n.charCodeAt(r)))throw new InvalidCharacterError("Invalid character: the input contains U+0000.");t>=1&&t<=31||127==t||0===r&&t>=48&&t<=57||1===r&&t>=48&&t<=57&&45===i?a+="\\"+t.toString(16)+" ":a+=t>=128||45===t||95===t||t>=48&&t<=57||t>=65&&t<=90||t>=97&&t<=122?n.charAt(r):"\\"+n.charAt(r)}return"#"+a},p=function(e,t){var n;return"easeInQuad"===e.easing&&(n=t*t),"easeOutQuad"===e.easing&&(n=t*(2-t)),"easeInOutQuad"===e.easing&&(n=t<.5?2*t*t:(4-2*t)*t-1),"easeInCubic"===e.easing&&(n=t*t*t),"easeOutCubic"===e.easing&&(n=--t*t*t+1),"easeInOutCubic"===e.easing&&(n=t<.5?4*t*t*t:(t-1)*(2*t-2)*(2*t-2)+1),"easeInQuart"===e.easing&&(n=t*t*t*t),"easeOutQuart"===e.easing&&(n=1- --t*t*t*t),"easeInOutQuart"===e.easing&&(n=t<.5?8*t*t*t*t:1-8*--t*t*t*t),"easeInQuint"===e.easing&&(n=t*t*t*t*t),"easeOutQuint"===e.easing&&(n=1+--t*t*t*t*t),"easeInOutQuint"===e.easing&&(n=t<.5?16*t*t*t*t*t:1+16*--t*t*t*t*t),e.easingPatterns[e.easing]&&(n=e.easingPatterns[e.easing](t)),n||t},g=function(e,t,n){var o=0;if(e.offsetParent)do{o+=e.offsetTop,e=e.offsetParent}while(e);return o=Math.max(o-t-n,0),Math.min(o,y()-b())},b=function(){return Math.max(document.documentElement.clientHeight,e.innerHeight||0)},y=function(){return Math.max(document.body.scrollHeight,document.documentElement.scrollHeight,document.body.offsetHeight,document.documentElement.offsetHeight,document.body.clientHeight,document.documentElement.clientHeight)},v=function(e){return e&&"object"==typeof JSON&&"function"==typeof JSON.parse?JSON.parse(e):{}},O=function(e){return e?d(e)+e.offsetTop:0},S=function(t,n,o){o||(t.focus(),document.activeElement.id!==t.id&&(t.setAttribute("tabindex","-1"),t.focus(),t.style.outline="none"),e.scrollTo(0,n))};l.animateScroll=function(n,o,i){var l=v(o?o.getAttribute("data-options"):null),s=f(t||u,i||{},l),d="[object Number]"===Object.prototype.toString.call(n),h=d||!n.tagName?null:n;if(d||h){var m=e.pageYOffset;s.selectorHeader&&!r&&(r=document.querySelector(s.selectorHeader)),a||(a=O(r));var b,E,I=d?n:g(h,a,parseInt("function"==typeof s.offset?s.offset():s.offset,10)),H=I-m,A=y(),j=0,C=function(t,r,a){var i=e.pageYOffset;(t==r||i==r||e.innerHeight+i>=A)&&(clearInterval(a),S(n,r,d),s.after(n,o))},M=function(){j+=16,b=j/parseInt(s.speed,10),b=b>1?1:b,E=m+H*p(s,b),e.scrollTo(0,Math.floor(E)),C(E,I,c)};0===e.pageYOffset&&e.scrollTo(0,0),s.before(n,o),(function(){clearInterval(c),c=setInterval(M,16)})()}};var E=function(t){try{m(decodeURIComponent(e.location.hash))}catch(t){m(e.location.hash)}n&&(n.id=n.getAttribute("data-scroll-id"),l.animateScroll(n,o),n=null,o=null)},I=function(r){if(0===r.button&&!r.metaKey&&!r.ctrlKey&&(o=h(r.target,t.selector))&&"a"===o.tagName.toLowerCase()&&o.hostname===e.location.hostname&&o.pathname===e.location.pathname&&/#/.test(o.href)){var a;try{a=m(decodeURIComponent(o.hash))}catch(e){a=m(o.hash)}if("#"===a){r.preventDefault(),n=document.body;var i=n.id?n.id:"smooth-scroll-top";return n.setAttribute("data-scroll-id",i),n.id="",void(e.location.hash.substring(1)===i?E():e.location.hash=i)}n=document.querySelector(a),n&&(n.setAttribute("data-scroll-id",n.id),n.id="",o.hash===e.location.hash&&(r.preventDefault(),E()))}},H=function(e){i||(i=setTimeout((function(){i=null,a=O(r)}),66))};return l.destroy=function(){t&&(document.removeEventListener("click",I,!1),e.removeEventListener("resize",H,!1),t=null,n=null,o=null,r=null,a=null,i=null,c=null)},l.init=function(n){s&&(l.destroy(),t=f(u,n||{}),r=t.selectorHeader?document.querySelector(t.selectorHeader):null,a=O(r),document.addEventListener("click",I,!1),e.addEventListener("hashchange",E,!1),r&&e.addEventListener("resize",H,!1))},l}));

  smoothScroll.init({
    speed     : 1000,
    offset    : 0,
    updateURL : false,
    easing    : 'easeInOutCubic'
  });

})();
            
          
!
999px

Console