Sticky header works only on desktop and not on mobile

Question

I want to give a site I built a sticky header in desktop and mobile, and I can only seem to get it to work on desktop. I built it on Wordpress (I built my own theme), and that's why I have the jQuery(document).ready(function( $ ) { addition to the code (otherwise Wordpress' jQuery clashes with other JQ), so ignore that part.

This is the code I'm using:

<script type="text/javascript">
jQuery(document).ready(function( $ ) {
  $(window).scroll(function() {
   if ($('body').scrollTop() > 1){  
      $('#header').addClass("sticky");
      $('#toprightlogo').css("padding-top", "10px");
      $('#toprightlogo').css("padding-bottom", "10px");
      $('#topnav a').css("padding-top", "18px");
      $('#topnav a').css("padding-bottom", "13px");
      $('.callicon').css("top", "14px");
      $('button#responsive-menu-button').css("position", "fixed");
      $('button#responsive-menu-button').css("top", "0");
    }
    else{
      $('#header').removeClass("sticky");
      $('#toprightlogo').css("padding-top", "");
      $('#toprightlogo').css("padding-bottom", "");
      $('#topnav a').css("padding-top", "");
      $('#topnav a').css("padding-bottom", "");
      $('.callicon').css("top", "");
      $('button#responsive-menu-button').css("position", "");
      $('button#responsive-menu-button').css("top", "");
    }
  });
});
</script>

This is the html/php which calls the menu items:

<nav id="topnav">
  <?php wp_nav_menu( array( 'menu' => 'topmenu', 'container_class' => 'top-menu', 'theme_location' => 'header-menu' ) ); ?>
</nav>

This is the css:

#topnav ul {
    -webkit-padding-start: 0 !important;
    margin: 0;
}
#topnav {
    direction: rtl;
    float: left;
    alignment-adjust:central;
    margin: 0 auto;
    font-weight: 400;
    width: auto;
    text-align: center;
    behavior: url(../js/pie/PIE.htc);
}
#topnav > ul {
    position: relative;
    list-style: none;
    display: block;
    position: relative;
    -webkit-padding-start: 0 !important;
    behavior: url(../js/pie/PIE.htc);
    margin: 0;
}
#topnav li,
#topnav span,
#topnav a {
    border: 0;
    margin: 0 auto;
    padding: 0;
    position: relative;
    text-align: center;
    display: block;
    behavior: url(../js/pie/PIE.htc);
}
#topnav .menu-item-440 {
    margin-left: 20px !important;
}

#topnav > ul {
    position: relative;
    list-style: none;
    display: block;
    position: relative;
    -webkit-padding-start: 0 !important;
    behavior: url(../js/pie/PIE.htc);
    margin: 0;
}
#topnav li,
#topnav span,
#topnav a {
    border: 0;
    margin: 0 auto;
    padding: 0;
    position: relative;
    text-align: center;
    display: block;
    behavior: url(../js/pie/PIE.htc);
}
#topnav .menu-item-440 {
    margin-left: 20px !important;
}
#topnav:after,
#topnav ul:after {
    content: '';
    display: block;
    clear: both;
    margin: 0 auto;
    text-align: center;
    behavior: url(../js/pie/PIE.htc);
}
#topnav a {
    color: #0099cc;
    font-size: 16px;
    font-family: 'Open Sans Hebrew', Arial, Verdana, sans-serif;
    text-decoration: none;
    padding-top: 24px;
    padding-bottom: 19px;
    padding-left: 10px;
    padding-right: 10px;
    overflow: hidden;
    transition: 0.2s;
}
.enru a {
    min-width: 40px !important;
    padding-left: 0px !important;
    padding-right: 0px !important;
}
#topnav > ul > li {
    float: right;
}
#topnav > ul > li.active a,
#topnav > ul > li:hover > a {
    color: #FFFFFF;
    background: #00ace6;
}
#topnav .has-sub {
    z-index: 1;
}
#topnav .has-sub:hover > ul {
    display: block;
    background: #ffffff;
}
#topnav .has-sub:hover > ul > li {
    display: block;
    background: #ffffff;
}
#topnav .has-sub ul {
    display: none;
    position: absolute;
    width: 280px;
    top: 100%;
    right: 0;
    behavior: url(../js/pie/PIE.htc);
}
#topnav .has-sub ul li {
    float: none;
    position: relative;
}
#topnav .has-sub ul li a {
    text-align: right;
    background: #ffffff;
    border-bottom: 1px solid #eeeeee;
    color: #00394d;
    display: block;
    line-height: 160%;
    padding: 15px 20px;
    font-size: 14px;
    margin: 0 !important;
    width: 240px;
}
#topnav .has-sub ul li:hover a {
    background: #FF9900;
    color: #ffffff;
}
#topnav .has-sub .has-sub:hover > ul {
    display: block;
}
#topnav .has-sub .has-sub ul {
    display: none;
    position: absolute;
    right: 100%;
    top: 0;
}
#topnav .has-sub .has-sub ul li a {
    background: #0099CC;

}
#topnav .has-sub .has-sub ul li a:hover {
    background: #4a5662;
}

Can anyone figure out Why doesn't this work on mobile devices?

Answer 1

Maybe you are having issues with jQuery, I just created this snippet for a sticky nav with vanilla Javascript. It should work on mobile, adjust for your own needs.

  // grab the element that contains the navigation we want to create a sticky effect for const nav = document.querySelector("#main"); // create a variable that stores the height of the space between the top of the parent node (in this case our body element) of our nav and the top of our nav let topOfNav = nav.offsetTop; // create our function that should run everytime the user scrolls function fixNav() { // if the user scrolls further down than the height of our variable add the class fixed-nav and add a padding if( window.scrollY >= topOfNav ) { // the padding is added because the element is removed from the document flow due to position: fixed document.body.style.paddingTop = nav.offsetHeight + 'px'; // position: add css class fixed-nav document.body.classList.add('fixed-nav'); } else { // remove the class and padding when the user scrolls above our nav again document.body.style.paddingTop = 0; document.body.classList.remove('fixed-nav'); } } window.addEventListener('scroll', fixNav); 

 * { margin: 0; padding: 0; } body { height: 800px; background: grey; } .upper-space { display: block; background: red; height:200px } nav { display: block; width: 100%; top: 0; color: white; background: #333; height: 100px; } ul.navigation { list-style-type: none; } .navigation li { float: left; width: 100px; } .fixed-nav #main { position: fixed; } 

 <body> <div class="upper-space"> </div> <nav id="main"> <ul class="navigation"> <li>menu item 1</li> <li>menu item 2</li> <li>menu item 3</li> </ul> </nav> Suscipit, libero, aperiam est sequi aspernatur malesuada ratione, quaerat ipsa posuere nisl perferendis laboris facilisis voluptas conubia sodales, dolorem? Malesuada purus, dolorem torquent distinctio, animi qui rerum, culpa. Mattis accumsan doloribus pellentesque eveniet. Porro sequi omnis soluta inceptos, dicta curae hac adipiscing anim adipiscing ante. Luctus hymenaeos pharetra, facilisi explicabo. Laboris justo tincidunt illo incididunt erat netus quisquam doloremque eos habitasse sequi! Rerum primis, sodales! Totam, feugiat mattis est atque! Eiusmod curabitur deserunt earum quis, libero euismod reiciendis quae et, perspiciatis donec voluptates, consequuntur, vel purus! Voluptate platea doloribus? Blanditiis aptent litora excepteur vulputate! Cursus. Felis nostrum mattis, nisi, adipiscing. </body>