<div class="nav-trigger js_navbar">
      <span></span><span></span><span></span>
    </div>
    <div class="nav-menu">
      <ul>
        <a href="#"> <li><h2 class="mt">Home</h2><i>Go to</i></li></a>
        <a href="#"><li><h2 class="mb">About</h2><i>Me</i></li></a>
        <a href="#"><li><h2 class="mt">Work</h2><i>My</i></li></a>
        <a href="#"><li><h2 class="mb">Contact</h2><i>Me</i></li></a>
      </ul>
    </div>
<section>
  <div class="content">
    
    </div>
  </section>
<section class="bgwhite">
  <div class="content">
    
    </div>
  </section>

$cursive: 'Advent Pro', sans-serif;
$gray: #23222a;
$white: #fff;
$red: #e65454;
$black: #000;
$md-width: 62em;
$sm-width: 48em;
$xs-width: 30em;

@mixin sm {
  @media (min-width: #{$sm-width}) and (max-width: #{$md-width - 0.0625em}) {
    @content;
  }
}
@mixin xs {
  @media (max-width: #{$xs-width}) {
    @content;
  }
}

* {
  box-sizing: border-box;
   -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
}

*, *:before, *:after {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: $cursive;
  overflow-x: hidden;
}

section {
  width: 100%;
  padding: 0 7%;
  display: table;
  margin: 0;
  max-width: none;
  background-color: $gray;
  height: 100vh;
  color: $white;
}

.content {
  display: table-cell;
  vertical-align: middle;
  color: $white;
}

.nav-trigger {
  width: 30px;
  height: 30px;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 20;
  cursor: pointer;
  -webkit-transition: top .1s ease-in-out;
  transition: top .1s ease-in-out;
  span {
    display: block;
    width: 100%;
    height: 2px;
    background: $white;
    margin: 7px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.3);
    &:first-child {
      top: 0;
      left: 0;
    }
    &:nth-child(2) {
      width: 20px;
      top: 10px;
      left: 0;
    }
    &:last-child {
      top: 20px;
      left: 0;
    }
  }
  .on {
    top: 10px;
  }
}

.nav-trigger.on span:first-child {
-webkit-transform: translateY(10px) rotate(45deg);
  transform: translateY(10px) rotate(45deg);
}

.nav-trigger.on span:nth-child(2) {
-webkit-transform: translateX(50px);
  transform: translateX(50px);
opacity: 0;
}

.nav-trigger.on span:last-child {
-webkit-transform: translateY(-8px) rotate(-45deg);
  transform: translateY(-8px) rotate(-45deg);
}

.nav-trigger-dark {
  width: 30px;
  height: 30px;
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 20;
  cursor: pointer;
  -webkit-transition: top .1s ease-in-out;
  transition: top .1s ease-in-out;
  span {
    display: block;
    width: 100%;
    height: 2px;
    background: $black;
    margin: 7px auto;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 0 3px 1px rgba(255, 255, 255, 0.3);
    &:first-child {
      top: 0;
      left: 0;
    }
    &:nth-child(2) {
      width: 20px;
      top: 10px;
      left: 0;
    }
    &:last-child {
      top: 20px;
      left: 0;
    }
  }
  .on {
    top: 10px;
  }
}

.nav-trigger-dark.on span:first-child {
-webkit-transform: translateY(10px) rotate(45deg);
  transform: translateY(10px) rotate(45deg);
}

.nav-trigger-dark.on span:nth-child(2) {
-webkit-transform: translateX(50px);
  transform: translateX(50px);
opacity: 0;
}

.nav-trigger-dark.on span:last-child {
-webkit-transform: translateY(-8px) rotate(-45deg);
  transform: translateY(-8px) rotate(-45deg);
}

.nav-menu {
  height: 100%;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  z-index: 19;
  overflow: hidden;
  ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    text-align: center;
    position: relative;
    -webkit-transition: opacity .35s, visibility .35s, height .35s;
    transition: opacity .35s, visibility .35s, height .35s;
    a {
      position:relative;
      float: left;
      margin: 0;
      width: 25%;
      height: 100vh;
      text-align: center;
      cursor: pointer;
      background: $red;
      color: $white;
      text-decoration: none;
      @include xs {
        width: 100%;
        height:25vh;
      }
      li {
        position: absolute;
        text-transform: uppercase;
        font-family: $cursive;
        top:45%;
        left:0;
        position:relative;
        -webkit-animation: fadeInRight .5s ease forwards;
        animation: fadeInRight .5s ease forwards;
        @include xs {
          top: 25%;
        }
      }
      h2.mb {
        -webkit-transition: -webkit-transform 0.35s;
        transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
        transition: transform 0.35s, -webkit-transform 0.35s;
        margin-bottom: -20px;
        font-size: 2.25rem; /* 36/16 */
        @include xs {
          font-size: 1.688rem; /* 27/16 */
        }
        @include sm {
          font-size:2rem; /* 32/16 */
          margin-bottom: -13px;;
        }
      }
      h2.mt {
        -webkit-transition: -webkit-transform 0.35s;
        transition: -webkit-transform 0.35s;
        transition: transform 0.35s;
        transition: transform 0.35s, -webkit-transform 0.35s;
        margin-bottom: -60px;
        font-size: 2.25rem; /* 36/16 */
        @include xs {
          font-size: 1.688rem; /* 27/16 */
        }
        @include sm {
          font-size:2rem; /* 32/16 */
        }
      }
      i {
        font-style: normal;
        opacity: 0;
        -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, -webkit-transform 0.35s;
        transition: opacity 0.35s, transform 0.35s;
        transition: opacity 0.35s, transform 0.35s, -webkit-transform 0.35s;
        -webkit-transform: translate3d(0,-30px,0);
        transform: translate3d(0,-30px,0);
        font-size: 1.875rem; /* 30/16 */
        @include xs {
          display: none;
        }
      }
      &:hover {
        background: $white;
        color: $red;
        h2 {
          -webkit-transform: translate3d(0,0,0);
              transform: translate3d(0,0,0);
        }
        i {
          opacity: 1;
          -webkit-transform: translate3d(0,0,0);
          transform: translate3d(0,0,0);
        }
      }
      &.active {
        background: $white;
        color: $red;
        &:hover {
          color: $black;
        }
      }
    }
  }
}

@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

.bgwhite {
  background: $white;
}

$('body').on('click', '.nav-trigger', function() {
    $(this).toggleClass('on');
    $('.nav-menu').fadeToggle(200);
});

$('body').on('click', '.nav-trigger-dark', function() {
    $(this).toggleClass('on');
    $('.nav-menu').fadeToggle(200);
});

$(document).scroll(function (e) {
      $.each($('section'), function (index, section) {
        if($(this).scrollTop() >= section.getBoundingClientRect().top && $(this).scrollTop() <= section.getBoundingClientRect().bottom){
        if ($(section).hasClass('bgwhite')) {
            $('.js_navbar').removeClass('nav-trigger');      
            $('.js_navbar').addClass('nav-trigger-dark');
          } else {
            $('.js_navbar').removeClass('nav-trigger-dark');      
            $('.js_navbar').addClass('nav-trigger');   
          }
        }
      });
    });