Sticky menu on scroll

by 8ogdan

HTML

<p class='p p--big'>I keep seeing sticky headers used incorrectly so I thought I would create a codepen that demos how to prevent content from jumping up when the menu is taken out of the flow and fixed to the top. Scroll to see it in action.</p>
<div class='sticky-wrapper'>
    <div class='sticky-header'>
        <span class='sticky-stuff'>Sticky Menu</span>
    </div>
</div>
<p class='p'>We serve freshly brewed tea and coffee, soft drinks and a section of light meals and tasty treats and snacks. We are open for breakfast, lunch and afternoon tea from 8am to 5pm and unlike any other cafe in the town, we are open 7 days per week.</p>
<p class='p p--collapse'>A truly family run business, we aim to create a cosy and friendly atmosphere in the cafe with Mum and Auntie doing the cooking and Dad and the (grown-up) children serving front of house. We look forward to welcoming you to the Cafe on the Corner very soon.</p>
<p class='p p--collapse'>We serve freshly brewed tea and coffee, soft drinks and a section of light meals and tasty treats and snacks. We are open for breakfast, lunch and afternoon tea from 8am to 5pm and unlike any other cafe in the town, we are open 7 days per week.</p>
<p class='p p--collapse'>A truly family run business, we aim to create a cosy and friendly atmosphere in the cafe with Mum and Auntie doing the cooking and Dad and the (grown-up) children serving front of house. We look forward to welcoming you to the Cafe on the Corner very soon.</p>
<p class='p p--collapse'>We serve freshly brewed tea and coffee, soft drinks and a section of light meals and tasty treats and snacks. We are open for breakfast, lunch and afternoon tea from 8am to 5pm and unlike any other cafe in the town, we are open 7 days per week.</p>
<p class='p p--collapse'>A truly family run business, we aim to create a cosy and friendly atmosphere in the cafe with Mum and Auntie doing the cooking and Dad and the (grown-up) children serving front of house. We look forward to...

CSS

@import url(https://fonts.googleapis.com/css?family=Lato);

* {
  box-sizing: border-box;
}
body {
  background-color: #f2f2f2;
  margin: 0;
}
.p {
  max-width: 720px;
  margin: 0 auto;
  font-family: 'Lato';
  color: #292929;
  font-size: 18px;
  line-height: 1.5;
  padding: 50px 10px;
}
.p.p--big {
  font-size: 24px;
  height: 900px;
}
.p.p--collapse {
  padding: 0 10px 50px;
}




.sticky-wrapper {
position: sticky;
bottom: 0;
}
.sticky-wrapper:after {
  content: '';
  display: block;
  width: 100%;
  height: 50px;
  margin-top: -50px;
  z-index: 2;
}
.sticky-wrapper.sticky-wrapper--fixed:after {
  margin: 0;
}
.sticky-header {
  position: relative;
  width: 100%;
  height: 50px;
  background-color: #42bdc2;
  padding: 0 50px;
}
.sticky-wrapper--fixed .sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}
.sticky-stuff {
  font-family: 'Lato';
  color: #fff;
  font-size: 15px;
  line-height: 50px;
}

JavaScript

$(window).scroll(function(e) {
    var diff = $('.sticky-wrapper')[0].offsetTop - window.pageYOffset; // find top of window
    
    if (diff < 0) {
        $('.sticky-wrapper').addClass('sticky-wrapper--fixed'); // position:fixed
    } else {
        $('.sticky-wrapper').removeClass('sticky-wrapper--fixed'); // position:relative
    }
    
});