Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

+ 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

Auto Save

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.header ヘッダー
.container#container
  main.main
    h1 メインコンテンツ
    p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed diam in elit tincidunt fringilla. Duis vulputate elementum enim, eget aliquam purus bibendum id. Vestibulum ultricies gravida sollicitudin. Nullam tristique suscipit arcu vel tincidunt. Sed posuere erat nunc, dictum feugiat elit porta ut. Nunc pulvinar eros felis, nec euismod nisi pharetra vel. Integer laoreet risus nec elit fermentum vehicula. Ut feugiat porttitor sagittis. Donec turpis mi, aliquet id magna non, consequat dapibus tortor. Phasellus feugiat eu nisl eu molestie. Ut gravida ipsum ac elit interdum cursus. Mauris faucibus sem sem, non imperdiet libero gravida et. Curabitur sed diam nulla. Sed lectus sapien, imperdiet convallis quam sit amet, dictum tincidunt tellus. Aliquam condimentum a leo eget rutrum.
    p Curabitur consectetur orci et tempus varius. Vivamus sed nisl tincidunt, placerat arcu et, feugiat dolor. Praesent vestibulum felis vitae lacus luctus, quis tincidunt augue aliquam. Proin urna purus, tincidunt id nunc sed, rutrum finibus sem. Donec efficitur arcu eget ultrices aliquam. Suspendisse ultrices diam sit amet interdum pharetra. Donec nec metus rhoncus augue dignissim mattis. Vestibulum ac ante bibendum, vehicula ex sit amet, ultricies diam. Mauris mi nunc, viverra ultricies purus in, scelerisque vestibulum urna. Pellentesque eleifend efficitur justo, ut tincidunt velit fringilla id. Curabitur augue turpis, interdum in efficitur facilisis, vehicula ac lectus. Nulla mauris ante, maximus id ex iaculis, tristique semper dui.
    p Aliquam suscipit vulputate mattis. Etiam pretium sed odio vitae cursus. Sed tortor est, fringilla vitae ornare in, vestibulum et purus. Proin id nisi tincidunt, tincidunt elit non, aliquam lectus. Suspendisse viverra pharetra ligula, et blandit tellus. Pellentesque nunc erat, blandit sed interdum vel, vulputate quis magna. Praesent tincidunt quam convallis, aliquam orci nec, suscipit purus. Morbi hendrerit condimentum magna vitae tincidunt. Nulla malesuada purus non laoreet condimentum. Ut luctus feugiat laoreet.
    p Fusce posuere orci feugiat vulputate sollicitudin. Morbi congue aliquam gravida. Mauris pulvinar eu metus eget vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum in massa vel lectus lobortis faucibus et a ex. Nam tincidunt dolor sit amet enim rutrum, vitae fringilla velit volutpat. Nullam rhoncus enim ex, lobortis molestie sapien bibendum sit amet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nullam non interdum sapien. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque non turpis luctus, dapibus tellus et, egestas urna.
    p Suspendisse dapibus ex ac cursus malesuada. Vestibulum a ex maximus, interdum eros a, lobortis felis. Curabitur fringilla, libero eget interdum iaculis, magna ex lacinia est, vel volutpat tortor velit id nisi. Nunc et nibh in nibh euismod imperdiet. Nulla facilisi. Aenean sollicitudin mi congue consectetur accumsan. Nam hendrerit mauris vel diam pellentesque fringilla. Aenean auctor blandit nisi, sed consequat mi mattis sit amet. Curabitur nunc nunc, tristique non lobortis vitae, varius interdum libero. Cras venenatis libero nisi, vitae facilisis purus tincidunt in. Donec eu pharetra libero. Donec cursus purus pulvinar, tincidunt nibh vitae, consequat tellus. Nam at congue neque.
    p Suspendisse aliquet placerat semper. Pellentesque at porta arcu. Nunc eu velit quis ex auctor aliquet. Cras efficitur venenatis dui et viverra. Nam augue nulla, auctor eu lectus eu, accumsan tristique neque. Nulla faucibus tincidunt velit, ut aliquam est ullamcorper varius. Integer ut tellus vitae magna tempus ultricies. Sed condimentum aliquet urna non blandit. Mauris dui diam, tincidunt vitae pretium ut, hendrerit vitae odio. Curabitur bibendum, elit nec tempor condimentum, metus metus auctor ex, at varius ante massa ut lacus. Etiam egestas nibh pellentesque mollis facilisis.
    p Quisque maximus lorem vel erat dignissim luctus. Nunc et turpis eros. Sed in fermentum orci. Praesent eget bibendum lectus, nec ultrices velit. Sed interdum pharetra eros, at accumsan sem ultrices id. Proin ante sem, tempus in sem in, tempor venenatis neque. Duis porttitor augue non elit faucibus porta. Mauris ultrices quam at ligula vulputate efficitur. Aliquam malesuada interdum justo at fermentum. In scelerisque sapien et fermentum mattis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. In nec placerat velit, sit amet ornare sapien. Aliquam at efficitur mauris. Aliquam vestibulum arcu faucibus suscipit imperdiet.
    p Vivamus sagittis nunc sed gravida semper. Nulla at ligula in orci mattis bibendum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nulla facilisi. Vivamus pulvinar nulla a justo mollis dictum. Integer molestie massa mollis tincidunt tristique. Phasellus at pulvinar neque, eu facilisis diam. Proin erat quam, lacinia id pretium ac, faucibus a lorem. Nullam at viverra eros, in pharetra tortor. Donec vitae leo non orci sodales interdum. Proin faucibus gravida hendrerit.
    p Vestibulum eleifend, leo vitae condimentum efficitur, mauris neque condimentum nisl, ultrices molestie magna eros et metus. In aliquam ac dui a convallis. Pellentesque ornare gravida lorem, sed maximus purus aliquam a. Suspendisse eu rutrum purus, id pellentesque ligula. Pellentesque ut nibh in velit mollis ullamcorper nec ut nibh. Suspendisse fringilla vel mi eu cursus. Nulla dictum mollis auctor. In hendrerit, urna ac tristique iaculis, tortor libero iaculis odio, quis molestie eros augue sit amet quam. Vestibulum id posuere mi. Cras pellentesque erat ultrices, posuere massa nec, varius dolor.
    p Sed sit amet pellentesque lorem, vel blandit tellus. In elementum enim sit amet mauris bibendum placerat at eget nunc. Donec ac nunc in metus euismod ultricies et nec tortor. Aenean ultrices lobortis blandit. In viverra nisl in luctus rutrum. Maecenas euismod ipsum quis diam commodo, id interdum orci semper. Duis a placerat nunc. Nam in porttitor ex. Phasellus dignissim lacus vitae nulla pellentesque feugiat. Mauris eu lorem enim. Vestibulum ut aliquam orci. In euismod magna sed lorem bibendum cursus. Nam convallis nisi at velit egestas, a facilisis felis aliquet. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent tincidunt, urna volutpat sollicitudin fringilla, tellus arcu mollis odio, sed pharetra elit velit vel dolor.
    p Phasellus eget eros quis urna ultrices sodales. Sed nec lacinia elit. Fusce velit arcu, tristique vitae suscipit ac, consequat et mi. Aliquam lectus tellus, aliquet nec condimentum ut, malesuada nec dolor. Nulla sed bibendum libero. Sed quis tellus dictum, porta orci eu, rutrum metus. Nullam pellentesque congue pulvinar. Mauris sit amet metus dolor.
    p Fusce in magna porttitor, vestibulum ligula id, eleifend nibh. Nullam ut nibh nulla. Vestibulum imperdiet diam finibus lorem molestie malesuada. Donec vitae suscipit urna. Mauris consequat congue enim ut viverra. Donec nulla magna, egestas ut aliquam vel, scelerisque ut sem. Cras accumsan metus vel sapien sollicitudin, sagittis dignissim nulla auctor. Pellentesque tincidunt sit amet mi dictum ornare. Nulla facilisi. Sed pulvinar vehicula ante et accumsan.
    p Pellentesque non orci vel est hendrerit hendrerit sit amet vitae turpis. Quisque ornare commodo odio, quis gravida nisi dictum id. Suspendisse leo nulla, aliquet non fringilla non, hendrerit quis eros. Sed ut porta turpis. Proin a scelerisque mi. Maecenas velit nunc, fermentum nec bibendum id, interdum non arcu. Integer faucibus dolor eget interdum varius. Aliquam id egestas nibh.
    p Aliquam nec tortor nisi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Mauris fringilla dolor dui, ac blandit purus porta ac. Vestibulum eget tortor vitae nibh porta laoreet. Vivamus ac justo eleifend, ultricies orci non, suscipit sem. Nunc tempus id nibh ac malesuada. Mauris non tortor tortor. Cras et posuere orci. Duis vitae mattis neque. Aliquam ut varius sem. Duis sodales lacinia ex eget molestie.

  aside.aside#aside
    h2 サイドバー
    ul
      -for( var i = 1 ; i < 8 ; i++ )
        li
          a(href="") リンク
    
footer.footer フッター
              
            
!

CSS

              
                *{
  box-sizing:border-box;
}
body{
  min-width:600px;
}
.header{
  width: 100%;
  background-color: #ddd;
  height: 150px;
  display: flex;
  align-items:center;
  justify-content:center;
  font-size: 20px;
}
.footer{
  width: 100%;
  background-color: #333;
  height: 500px;
  display: flex;
  align-items:center;
  justify-content:center;
  font-size: 20px;
  color:#fff;
  margin-top: 40px;
}
.container{
  width: calc(100% - 30px);
  max-width: 1000px;
  margin:40px auto 0;
  position: relative;
  padding-left: 200px;
}
$offsetY:20px;
.aside{
  width: 150px;
  padding-bottom: 40px;
  position: absolute;
  left: 0;
  top: 0;
  transition:.5s top ease;
  max-height:calc(100vh - #{$offsetY});
  overflow:auto;
  &.is-end{
    top: auto;
    bottom: 0;
  }
  h2{
    font-weight: bold;
    font-size: 18px;
    border-bottom: 1px solid #000;
    padding-bottom: 0.25em;
    margin-bottom: 0.25em;
  }
  li{
    line-height: 2;
  }
}
.main{
  h1{
    font-weight: bold;
    font-size: 24px;
    line-height: 1.3;
    margin-bottom: 0.6em;
  }
  p{
    font-size: 16px;
    line-height: 2;
  }
}
              
            
!

JS

              
                (function(){
  const container = document.getElementById('container');
  const aside = document.getElementById('aside');
  const offsetY = 20;
  container.style.minHeight = aside.clientHeight + 'px'; 
  window.addEventListener('scroll',()=>{
    const containerRect = container.getBoundingClientRect();
    const isReachBottom = (aside,containerRect,offsetY)=>{
      if( aside.clientHeight < window.innerHeight ){
        if(containerRect.bottom <= aside.clientHeight + offsetY){
          return true;
        }else{
          return false;
        }
      }else{
        if(containerRect.bottom < window.innerHeight - offsetY){
          return true;
        }else{
          return false;
        }
      }
    }
    if( isReachBottom(aside,containerRect,offsetY) ){
      aside.style.top = '';
      aside.classList.add('is-end');
    }else if( containerRect.top < offsetY ){
      aside.classList.remove('is-end');
      const y = containerRect.top*-1 + offsetY;
      aside.style.top = y+'px';
    }else{
      aside.classList.remove('is-end');
      aside.style.top = '';
    }
  });
})();
              
            
!
999px

Console