Add a javascript matchmedia to this code?

See more:

Javascript

Hi, I am trying to achieve a result where, whilst on mobile devices (1080px and below) the topbar on my website slides up out of view when the user swipes down the page, and then slides down again back into view when they swipe back upwards.

But on any viewports larger than 1080px I want it to remain fixed at the top of the viewport.

I have achieved the slide up and down behaviour based on the users scroll position on the page but I cannot figure out how to attach a match media to the hideNav so that its slide up and down behaviour is based on the viewport being 1080px or less.

I would greatly appreciate any help.

Many thanks.

Marc

What I have tried:

<pre>var prevScrollpos = window.pageYOffset;

window.addEventListener("scroll", hideNav);
window.addEventListener("scroll", hideBreadcrumbs);
window.addEventListener("scroll", hideMenu);
window.addEventListener("scroll", progressBar);

function hideBreadcrumbs() {

    var currentScrollPos = window.pageYOffset;

    if (prevScrollpos > currentScrollPos){
            document.getElementsByClassName("breadcrumb").style.top = "200px";
    }
    else {
            document.getElementsByClassName("breadcrumb").style.top = "-135px";
    }
    prevScrollpos = currentScrollPos;
}

// It is just this following section of code regarding hideNav to which I am referring //

function hideNav() {

    var currentScrollPos = window.pageYOffset;

    if (prevScrollpos > currentScrollPos){
            document.getElementById("topnav").style.top = "0px";
    }
    else {
            document.getElementById("topnav").style.top = "-135px";
    }
    prevScrollpos = currentScrollPos;
}

function hideMenu() {

    var currentScrollPos = window.pageYOffset;

    if (prevScrollpos > currentScrollPos){
            document.getElementsByClassName("menu-wrap").style.top = "0px";
    }
    else {
            document.getElementsByClassName("menu-wrap").style.top = "-75px";
    }
    prevScrollpos = currentScrollPos;
}

function progressBar() {

  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;

  document.getElementById("myBar").style.width = scrolled + "%";
}