Starting from scratch example

by linz lion

HTML

<link rel="stylesheet" href="http://darsa.in/sly/examples/css/horizontal.css">
<script src="http://darsa.in/sly/js/sly.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div class="navbar" style="background-color: white; height: 95px; position: fixed; width: 100%; z-index: 2; margin-top: -8px; border-bottom: 2px solid gray;">
DESKTOP HEADER
</div>
<div id="shiftnav-toggle-main" style="background-color: gray; height: 68px; position: fixed; width: 100%; z-index: 2; margin-top: -8px; border-bottom: 2px solid gray;">
MOBILE HEADER
</div>
<div style="height: 650px; background-color: lightblue;">
BANNER PLACEHOLDER
</div>
<div class="controls-mobile wrap">

			<div class="frame menu nav-controls mb-menu" id="forcecentered" style="overflow: hidden;">
				<ul class="clearfix careers-controls hdden-menu" style="transform: translateZ(0px) translateX(457px); min-width: 800px;">
					<li class="active lp_nav scroll" title="#whyus">WHY JOIN US</li>
          <li class="lp_nav scroll" title="#vision">VISION & CULTURE</li>
          <li class="lp_nav scroll" title="#benefits">BENEFITS</li>
          <li class="lp_nav scroll" title="#departments">DEPARTMENTS</li>
          <li class="lp_nav scroll" title="#locations">LOCATIONS</li>
          <li class="lp_nav scroll" title="#openpositions">OPEN POSITIONS</li>
				</ul>
			</div>

</div>
<div style="height: 650px; background-color: lightgreen;">
CONTENT PLACEHOLDER
</div>
<div id="whyus"><p style="height: 200px; background-color: darkred;">WHY US</p></div>
<div id="vision"><p style="height: 200px; background-color: darkblue;">Vision & Culture</p></div>
<div id="benefits"><p style="height: 200px; background-color: darkgreen;">Benefits</p></div>
<div id="departments"><p style="height: 200px; background-color: purple;">Departments</p></div>
<div id="locations"><p style="height: 200px; background-color: orange;">Locations</p></div>
<div id="openpositions"><p...

CSS

.wrap {
    margin: 0;
}
@media screen and (min-width: 991px) {
  #shiftnav-toggle-main {
    display: none;
  }
  ul.careers-controls.hidden-menu {
    /*margin-left: -7%;  was 8% */
  }
  .menu {
    width: 100%;
  }
}
@media screen and (max-width: 991px) {
    .navbar {
     display: none; 
    }
   .rwd-line {
     display: block !important;
   }
   .menu li {
     margin-right: 0px !important;
   }
   ul.careers-controls.hidden-menu {
     /*margin-left: -20%; was padding-left: 2% !important; */
   }
}
.frame {
  height: 50px;
  line-height: 60px;
  margin: 0 !important;
}
.frame ul {
  font-size: 16px;
}
.frame ul li {
  background: none;
  width: auto;
  color: gray !important;
}
.frame ul li.active {
  border-bottom: 5px solid #8ac8ec;
  color: black !important;
  font-weight: 400 !important;
  background: none;
}
.frame ul li:hover {
    border-bottom: 5px solid #8ac8ec;
    color: black !important;
    font-weight: 400 !important;
}

ul.careers-controls.hidden-menu {
    padding-left: 0px !important;
}
ul.careers-controls li {
    display: inline;
    padding-left: 10px;
    padding-right: 10px;
    cursor: pointer;
    line-height: 24px;
}
.nav-controls {
    font-size: 16px !important;
    font-family: 'Raleway', sans-serif;
    font-weight: 200 !important;
    padding: 6px;
    text-align: center;
}
div.menu /* was nav.menu */{
    padding-bottom: 0px !important;
    border-bottom: 1px solid #e8e8e8;
    width: 100%;
}
.menu {
  z-index: 1 !important;
}
.menu ul {
  display: inline-block;
}
.menu li {
  margin: 0px 15px 0px 0px;
  float: left;
  list-style: none;
}


ul.hidden-menu li {
  line-height: 44px !important;
}

/* Existing VC CSS to keep */
.rwd-line {
    display: inline;
}
.post-entry {
    border-bottom: none;
}
.innerContainer {
    position: relative; 
    display: block;
    width: 100% !important;
    height: 0;
    padding: 56.25% 0 0 0; /* This should reflect your video aspect ratio */
}
.outerContainer {
    max-height: 360px; /*...

JavaScript

jQuery(document).ready(function($) {
        var stickyNavTopMobile = $('div.mb-menu').offset().top - 68;
        var stickyNavTopDesktop = $('div.mb-menu').offset().top - 95;
        var topHeightMobile = $('#shiftnav-toggle-main').outerHeight();
        var topHeightDesktop = $('div.navbar').outerHeight();

        var stickyNav = function() {
            var scrollTop = $(window).scrollTop();
          
            if (($(window).width() < 991) && (scrollTop >= stickyNavTopMobile)) {
                $('div.mb-menu').css ({
                    'position': 'fixed',
                    'top': topHeightMobile+'px',
                    'margin-top': '0px',
                    'background-color': 'white',
                    'margin-left': '-35em'
                });
            } else if (($(window).width() < 991) && (scrollTop < stickyNavTopMobile)){
              $('div.mb-menu').css ({
                  'position': 'relative',
                  'margin-top': '-35px',
                  'top': '0',
                  'margin-left': '-20%'
              });
            } else if (($(window).width() > 991) && (scrollTop >= stickyNavTopDesktop)) {
                $('div.mb-menu').css ({
                    'position': 'fixed',
                    'top': topHeightDesktop+'px',
                    'margin-top': '0px',
                    'padding-top': '15px',
                    'border-bottom': '1px solid #e8e8e8',
                    'background-color': 'white'
                });
            } else if (($(window).width() > 991) && (scrollTop < stickyNavTopDesktop)) {
                $('div.mb-menu').css ({
                    'position': 'relative',
                    'padding-top': '0px',
                    'margin-top': '-30px',
                    'top': '0'
                });
            }
        };
        stickyNav();
        $(window).scroll(function() {
           stickyNav();
        });
    });
    
    jQuery(function () {
    ...