Curtain Scroll With Sticky Menu

by septembrr

HTML

<div class="bg-row">
<h2>BACKGROUND</h2>
  Quisque efficitur porttitor dolor, ac suscipit lectus condimentum aliquet. Etiam mattis hendrerit erat vitae rhoncus. Phasellus interdum dui dui, quis laoreet tortor euismod eget. Donec ultricies, tellus sit amet dignissim ornare, est eros feugiat risus, at consectetur risus sem vitae erat. Nunc suscipit est eget nibh accumsan luctus non sed nunc. Nam dignissim ligula dui, vitae luctus felis luctus vitae. Phasellus purus nisi, egestas fermentum volutpat vitae, vehicula vitae tortor.

Aenean bibendum tellus sed erat luctus, eu congue nulla fringilla. Fusce accumsan neque risus, quis mattis sem rhoncus faucibus. Aliquam vulputate, velit ac commodo sollicitudin, augue lorem pellentesque quam, et lacinia nibh massa sit amet urna. In molestie sit amet tortor ac varius. Ut lobortis nisl eros, eu semper quam egestas in. Duis efficitur ornare mi ut accumsan. Ut tincidunt volutpat urna, a consectetur augue molestie vel. In cursus commodo massa. Sed non placerat dolor. Nunc id vestibulum enim. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Duis lobortis congue dolor sed lobortis. Proin turpis arcu, facilisis tincidunt risus non, tristique commodo nibh. Aenean vehicula lacinia tellus imperdiet ultrices. Duis ac metus vel urna interdum fringilla. Ut orci lorem, ornare sit amet hendrerit ac, ultrices at lacus. In hac habitasse platea dictumst. Ut eget mauris rhoncus, mattis urna eu, hendrerit elit. Proin dapibus, lectus eget lobortis vestibulum, mi massa bibendum quam, quis pharetra sapien eros eget eros. Aliquam lobortis magna eu tristique malesuada. Sed ac posuere purus. Maecenas aliquet vestibulum justo, id lobortis dui condimentum at. Donec ut lacus ut erat dignissim dapibus nec egestas augue. Cras at gravida urna. Aenean at mauris ex. In malesuada porttitor pharetra.

In mollis vitae augue at hendrerit. Sed est mi, vestibulum eget vehicula quis, faucibus vitae sem. Ut ac orci vel...

CSS

/* Background ---------------------------------------*/

.bg-row {
  position: fixed;
  top: 58px;
  background: red;
  height: 1200px;
  width: 100%;
  padding: 50px 20px;
}

/* Sticky Header -----------------------------------------*/

.nav-row {
  background: blue;
  width: 100%;
  position: fixed;
  z-index: 9;
  margin: 0 auto;
  top: 0;
  text-align: center;
  width: 100%;
  padding: 20px;
}

/* Curtain Styles --------------------------------------------*/

#curtain {
  z-index: 11;
  position: absolute;
  top: 0;
  width: 100%;
  background: yellow;
  padding: 50px 20px;
}

/* Active and Inactive Styles -----------------*/

.bg-frozen {
  position: fixed;
  top: 58px!important;
}

.bg-active {
  position: absolute!important;
}

JavaScript

jQuery(window).scroll(function() {
    var top_of_element = jQuery("#curtain").offset().top;
    var bottom_of_element = jQuery("#curtain").offset().top + jQuery("#curtain").outerHeight();
    var bottom_of_screen = jQuery(window).scrollTop() + window.innerHeight;
    var top_of_screen = jQuery(window).scrollTop();

   // If curtain element is NOT in viewport
   if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)) {
    jQuery('#curtain').each(function(){

      // Add bg-frozen class
      jQuery(".bg-row").addClass("bg-frozen");
      // Remove bg-active classes on background template
      jQuery(".bg-row").removeClass("bg-active");

    });
    }
   
    // If curtain element is in viewport
    else {
      jQuery('#curtain').each(function(){

        // Remove bg-frozen class and
        jQuery(".bg-row").removeClass("bg-frozen");
        // Add bg-active classes on background template
        jQuery(".bg-row").addClass("bg-active");

        // Dynamically set top property of background template
        var divTop = jQuery('#curtain').outerHeight() + jQuery('.nav-row').outerHeight();
        jQuery('.bg-row').css('top', divTop + 'px');

      });
    }
});

// Set min-height of content to match height of background
// So curtain can scroll out of view
jQuery(document).ready(function() {
    var divHeight = jQuery('.bg-row').height() + jQuery('#curtain').height() + jQuery('.nav-row').height();
    jQuery('.content').css('min-height', divHeight + 'px');
});