Stacked to Inline on scroll

[bizlynx]

Ive seen some solutions for this a few years ago, which Ive tried with no success. Wondering if anyone has got this working on a newer version of X (5.2.5)…
http://sleepinggrape.carteblanche.media/ Currently I have the logo disappearing on scroll and navbar fading in (would like the logo to disappear a little sooner). And then a logo added to the inline navbar.

css
/** set up our navbar, and position it fixed so there is no white gap above the CS content /
.x-navbar {
border: none;
box-shadow: none;
transition: background 0.7s ease-out;
background: transparent!important;
position: fixed;
z-index: 1030;
top: 0;
left: 0;
right: 0;
}
.x-logobar {
border: none;
box-shadow: none;
transition: background 0.7s ease-out;
background: transparent!important;
position: fixed;
z-index: 1030;
top: 0;
left: 0;
right: 0;
}
/ this is where you can set the background color of your header after it passes the hero image /
.x-navbar.pasthero {
border-bottom: 1px solid #ccc;
background-color: #fff!important;
box-shadow: 0 0.15em 0.35em 0 rgba(0,0,0,0.135);
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
/ and this is where you can set the nav link colour after the navbar has passed the hero image **/
.x-navbar.pasthero a, .x-navbar.pasthero .desktop .x-nav > li > a {
color: #000!important;
}
.x-navbar .desktop .sub-menu {
background: transparent;
font-size: 16px;
}
.x-navbar-fixed-top .desktop .sub-menu {
background: #fff!important;
}
.x-brand:hover, .x-brand:focus {
color: inherit;
}
.entry-content {
margin-top: 0;
}

.x-logobar-inner {padding-top:85px;}
.x-brand img {width:250px;}
.x-brand img.pasthero {display:none;}

jquery

jQuery(document).ready(function($){
// Detect if this is a hero image page by looking for the #heroimage ID
if( $(’#heroimage’).length ){
// get the value of the bottom of the #heroimage element by adding the offset of that element plus its height, set it as a variable
var mainbottom = $(’#heroimage’).offset().top + $(’#heroimage’).outerHeight(true);

$(window).on('scroll',function(){
  var stop = Math.round($(window).scrollTop());
  // If the use has scrolled past the bottom of the hero image
  if (stop > mainbottom) {
      $('.x-navbar').addClass('pasthero');
      $('.x-brand img').addClass('pasthero');
  } else {
  // if the user has scrolled back up above the bottom of the hero image
      $('.x-navbar').removeClass('pasthero');
      $('.x-brand img').removeClass('pasthero');
  }
});

} else {
// if no hero image present, add the opaque class right away
$(’.x-navbar’).addClass(‘pasthero’);
$(’.x-brand img’).addClass(‘pasthero’);
}
});