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

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

              
                <body>

  <!--fixed left sidebar-->
  <nav id="leftSidebar">
    <ul>
      <li><a href="#1">First Panel</a></li>
      <li><a href="#2">Second Panel</a></li>
      <li><a href="#3">Third Panel</a></li>
      <li><a href="#4">Fourth Panel</a></li>
      <li><a href="#5">Fifth Panel</a></li>
      <li><a href="#6">Sixth Panel</a></li>
    </ul>
  </nav>
  
  <!--multiple full-screen panels that scroll up and down-->
  <!--note: using a-name elements so the links still work with js disabled-->
  <div id="mainStack">
    <div id="panel1" class="panel">
      <a name="1"></a>
      First panel
    </div>
    <div id="panel2" class="panel">
      <a name="2"></a>
      Second panel
    </div>
    <div id="panel3" class="panel">
      <a name="3"></a>
      Third panel
    </div>
    <div id="panel4" class="panel">
      <a name="4"></a>
      Fourth panel
    </div>
    <div id="panel5" class="panel">
      <a name="5"></a>
      Fifth panel
    </div>
    <div id="panel6" class="panel">
      <a name="6"></a>
      Sixth panel
    </div>
  </div>
  
  <!--from each panel, a button to scroll horizontally to another panel-->
  <div id="sidePanelButton">
    Open Side Panel
  </div>
  
  <!--panel that scrolls horizontally into window on button click-->
  <div id="sidePanel" class="">
    Side panel
    <div id="sidePanelClose">x - Close this panel</div>
  </div>

</body>
              
            
!

CSS

              
                * {
  box-sizing: border-box; /* so we don't have to worry about padding affecting width */
}
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font: normal 16px/1.2 sans-serif;
}
#leftSidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 2; /* needs to stay on top of the mainStack AND the sidePanel */
  /* for demo only: */
  min-width: 250px;
  border-right: 1px solid #000;
  background-color: rgba(255,255,255,0.5);
}
#leftSidebar > ul {
  /* all of these are for demo only: */
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
}
#leftSidebar > ul > li {
  /* all of these are for demo only: */
  width: 100%;
  padding: 10px 20px;
  border-bottom: 1px solid #999;
}
#panel1, #panel2, #panel3, #panel4, #panel5, #panel6 {
  /* all of these are for demo only: */
  width: 100%;
  height: 100vh; /* css3 way to say 100% of the viewport height. works on IE9+ and modern browsers. needs patch for iOS devices: https://gist.github.com/pburtchaell/e702f441ba9b3f76f587. also needs patch for print stylesheets (height:auto). */
  text-align: center;
  font-size: 50px;
}
#panel1, #panel3, #panel5 {
  /* for demo only: */
  background-color: khaki;
}
#panel2, #panel4, #panel6 {
  /* for demo only: */
  background-color: cadetblue;
}
#sidePanelButton {
  position: fixed;
  top: 0;
  right: 0;
  /* for demo only: */
  cursor: pointer;
  padding: 40px;
  border: 1px solid #000;
  background-color: tomato;
}
#sidePanel {
  width: 100%;
  height: 100vh; /* css3 way to say 100% of the viewport height. works on IE9+ and modern browsers. needs patch for iOS devices: https://gist.github.com/pburtchaell/e702f441ba9b3f76f587. also needs patch for print stylesheets (height:auto). */
  position: fixed;
  overflow-x: hidden;
  overflow-y: auto;
  top: 0;
  left: 100%;
  transition: left 0.4s; /* creates sliding motion */
  -webkit-transition: left 0.4s;
  z-index: 1; /* needs to be above the mainStack */
  background-color: tomato; /* you need to set a background-color here so this panel covers up the others when it slides in. */
  /* for demo only: */
  text-align: center;
  font-size: 50px;
}
#sidePanel.open {
  left: 0; /* move the sidePanel into the viewport when you click the button */
}
              
            
!

JS

              
                //--- DEFINE a reusable animation function: ---//
function scrollThere(targetElement, speed) {
  // initiate an animation to a certain page element:
  $('html, body').stop().animate(
    { scrollTop: targetElement.offset().top }, // move window so target element is at top of window
    speed, // speed in milliseconds
    'swing' // easing
  ); // end animate
} // end scrollThere function definition


//--- START NAV-ITEM CLICK EVENTS ---//
// when the user clicks a nav item:
$("#leftSidebar ul li a").click(function (e) {

  e.preventDefault(); // don't jump like a typical html anchor

  // find the index of the "#" character in the href string...
  var startOfName = $(this).attr('href').indexOf("#"),
      // ...then use it as the argument in the slice() method (add 1 so you don't include the # character).
      clickRef = $(this).attr('href').slice(startOfName + 1),
      targetEl = $('a[name=' + clickRef + ']'); // select the element this link is pointing to

  // scroll there smoothly:
  scrollThere(targetEl, 400);

}); // end click
//--- END NAV-ITEM CLICK EVENTS ---//


//--- START SCROLL EVENTS ---//
// detect a mousewheel event (note: relies on jquery mousewheel plugin):
$(window).on('mousewheel', function (e) {

  // get Y-axis value of each div:
  var div1y = $('#panel1').offset().top,
      div2y = $('#panel2').offset().top,
      div3y = $('#panel3').offset().top,
      div4y = $('#panel4').offset().top,
      div5y = $('#panel5').offset().top,
      div6y = $('#panel6').offset().top,
      // get window's current scroll position:
      lastScrollTop = $(this).scrollTop(),
      // for getting user's scroll direction:
      scrollDirection,
      // for determining the previous and next divs to scroll to, based on lastScrollTop:
      targetUp,
      targetDown,
      // for determining which of targetUp or targetDown to scroll to, based on scrollDirection:
      targetElement;

  // get scroll direction:
  if ( e.deltaY > 0 ) {
    scrollDirection = 'up';
  } else if ( e.deltaY <= 0 ) {
    scrollDirection = 'down';
  } // end if

  // prevent default behavior (page scroll):
  e.preventDefault();

  // condition: determine the previous and next divs to scroll to, based on lastScrollTop:
  if (lastScrollTop === div1y) {
    targetUp = $('#panel1');
    targetDown = $('#panel2');
  } else if (lastScrollTop === div2y) {
    targetUp = $('#panel1');
    targetDown = $('#panel3');
  } else if (lastScrollTop === div3y) {
    targetUp = $('#panel2');
    targetDown = $('#panel4');
  } else if (lastScrollTop === div4y) {
    targetUp = $('#panel3');
    targetDown = $('#panel5');
  } else if (lastScrollTop === div5y) {
    targetUp = $('#panel4');
    targetDown = $('#panel6');
  } else if (lastScrollTop === div6y) {
    targetUp = $('#panel5');
    targetDown = $('#panel6');
  } else if (lastScrollTop < div2y) {
    targetUp = $('#panel1');
    targetDown = $('#panel2');
  } else if (lastScrollTop < div3y) {
    targetUp = $('#panel2');
    targetDown = $('#panel3');
  } else if (lastScrollTop < div4y) {
    targetUp = $('#panel3');
    targetDown = $('#panel4');
  } else if (lastScrollTop < div5y) {
    targetUp = $('#panel4');
    targetDown = $('#panel5');
  } else if (lastScrollTop < div6y) {
    targetUp = $('#panel5');
    targetDown = $('#panel6');
  } else if (lastScrollTop > div6y) {
    targetUp = $('#panel6');
    targetDown = $('#panel6');
  } // end else if

  // condition: determine which of targetUp or targetDown to scroll to, based on scrollDirection:
  if (scrollDirection === 'down') {
    targetElement = targetDown;
  } else if (scrollDirection === 'up') {
    targetElement = targetUp;
  } // end else if

  // scroll smoothly to the target element:
  scrollThere(targetElement, 400);

}); // end on mousewheel event
//--- END SCROLL EVENTS ---//


//--- START SHOW/HIDE SIDE PANEL EVENTS ---//
// open the sidePanel when the button is clicked/tapped:
$("#sidePanelButton").click(function (e) {
  e.preventDefault();
  $("#sidePanel").addClass("open");
  $("#mainStack").addClass("shift");
}); // end click

// close the sidePanel when the X is clicked/tapped:
$("#sidePanelClose").click(function (e) {
  e.preventDefault();
  $("#sidePanel").removeClass("open");
  $("#mainStack").removeClass("shift");
}); // end click
//--- END SHOW/HIDE SIDE PANEL EVENTS ---//

              
            
!
999px

Console