Bad Shift When Sticky Mobile Header is activated

Highlighted
Excursionist
17 0 2

I have created div ids and classes for the logo section and header icons section on my mobile store website. I have created functions to activate a sticky header on scroll but there seems to be a bad shift or transition when scrolling down, which is bad user experience. How do I fix this bad shift? One note to add, once user scrolls, the logo is hidden and user should only see the header icons when scrolling. Once user is back to the top, the logo reappears.

LOGO SECTION: 

div id="logomobileheader" class="tt-mobile-header"

HEADER ICONS (Shop, account, favs, search, cart): 

div id="myHeaderMobile" class="container-fluid tt-top-line"

SEE CSS STYLES HERE:

 

.tt-mobile-header {background: #1e73be; z-index: 9999;}
.sticky {position: fixed; top: 0; width: 100%;}
#myHeaderMobile.sticky #logomobileheader {display:none!important}

 

SEE JAVASCRIPT HERE:

 

window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeaderMobile");
var sticky = header.offsetTop;

function myFunction() {
  if (window.pageYOffset > sticky) {
    header.classList.add("sticky");
  } else {
    header.classList.remove("sticky");
  }
}

 

0 Likes