Sticky Header Animation Issues with Mobile

[marxfoods]

Hi Everyone!

I have a website that I’ve been building on the Pro theme and am hoping to take it live soon. We’ve had a landing page without a header for quite some time and I’ve been creating a new homepage, various pages, and sticky header to replace it with.

irishnaturebeefusa.com/homepage

The behavior we want seems straight forward but I’m running into a few blockers. When a page is loaded on larger screens, I want the logo centered and stacked above the navbar links. When the user scrolls, I want the header to shrink, the logo to move from stacked to inline, and for this behavior to toggle again when you scroll back up to the top.

On mobile - the behavior should be the same for the most part. Larger at the top, smaller after scrolling, it switches when you scroll back to the top.

I’ve accomplished 90% of this but the issue I’m running into is when I’m on mobile/smaller devices, when I scroll down from the top or am scrolling back up to the top, the header takes ups the entire height of the screen. It ends up where/how I want it to but the overall UX isn’t ideal.

This is the JS I have running on the header. Any ideas??

// When the user scrolls down, make the stacked header switch to inline display
window.onscroll = function() {scrollFunction()};

function scrollFunction() {
  if (window.innerWidth > 978 && document.body.scrollTop > 10 || document.documentElement.scrollTop > 10) {
    document.getElementById("animatedHeader").style.display = "flex";
    document.getElementById("animatedHeader").style.flexDirection = "row";
    document.getElementById("animatedHeader").style.alignItems = "center";
    document.getElementById("animatedHeader").style.justifyContent = "center";
    document.getElementById("largeMenu").style.backgroundColor = "rgba(27,24,28,0.90)";
    document.getElementById("inbLogo").style.marginRight = "20px";
    document.getElementById("inbLogo").style.height = "95%";
    document.getElementById("animatedHeader").style.height = "100px";
    document.getElementById("largeMenu").style.height = "80px";
  } else if (window.innerWidth < 979 && document.body.scrollTop > 100 || document.documentElement.scrollTop > 100) {
    document.getElementById("animatedHeader").style.display = "block";
    document.getElementById("animatedHeader").style.flexDirection = "column";
    document.getElementById("animatedHeader").style.textAlign = "center";    
    document.getElementById("largeMenu").style.backgroundColor = "rgba(27,24,28)";
    document.getElementById("inbLogo").style.marginRight = "0px";
    document.getElementById("inbLogo").style.height = "75%";
    document.getElementById("animatedHeader").style.height = "199px";
    document.getElementById("largeMenu").style.height = "100%";
  }
  else {
    document.getElementById("animatedHeader").style.display = "block";
    document.getElementById("animatedHeader").style.flexDirection = "column";
    document.getElementById("animatedHeader").style.textAlign = "center";    
    document.getElementById("largeMenu").style.backgroundColor = "rgba(27,24,28)";
    document.getElementById("inbLogo").style.marginRight = "0px";
    document.getElementById("inbLogo").style.height = "75%";
    document.getElementById("animatedHeader").style.height = "199px";
    document.getElementById("largeMenu").style.height = "100%";
  }
}

Thank you!

[prakash_s]

Hello @marxfoods,

Thanks for writing to us.

I tried to access your site but the website is not accessible at my end due to a security plugin or due to IP restrictions. I would suggest you please disable IP restrictions or disable the security plugin.

Thanks