After executing a script, another script stops working?

Question

JavaScript

Here is the code for the menu button:

var mainBurgerMenu = $('.main-burger-menu'),
    bulletsContainer = $('.bullets-container'),
    slideContent = $('.slide-content'),
    overfloWrapper = $('.overflow-wrapper');

$('#burger-top').click(function(e) { //открытие главного меню
  slideContent.css({transform: 'translateX(-60%)'})
  overfloWrapper.addClass('overflow-wrapper--hidden');
  mainBurgerMenu.css({width: '60%'});
  bulletsContainer.css({display: 'none'});
  bodyPage.css({'overflow-y': 'hidden'});
  e.preventDefault();
});

$('#close-btn-nav').click(function(e) { //закрытие главного меню
  slideContent.css({transform: 'translateX(0)'})
  overfloWrapper.removeClass('overflow-wrapper--hidden');
  mainBurgerMenu.css({width: '0'});
  bulletsContainer.css({display: 'flex'});
  bodyPage.css({'overflow-y': 'auto'});
  e.preventDefault();
});

And there is one for the sticky menu (by default, the menu should be hidden when scrolling down, and appear when scrolling up):

var topNavigation = document.querySelector('#nav-wrapper');
var prevPosition = 700;

function onScroller() {
  var st = $(this).scrollTop();
  if (st > prevPosition) {
   topNavigation.classList.add('top-nav-menu-close');
  } else {
   topNavigation.classList.remove('top-nav-menu-close');
  }
  prevPosition = st;
}

document.addEventListener('scroll', onScroller);

Explanation
At first, the second script works as it should. But after opening and closing the menu (the first script), it stops working as it should (begins to show the menu only when offset.top = 0).

Here is the code

Answer 1

slideContent.css({transform: 'translateX(0)'})is not nulling translateX
here is nulling:
https://jsfiddle.net/x3grdns7/1/