javascript - 粘性 header 仅适用于桌面设备，不适用于移动设备

Question

我想为我在桌面和移动设备上构建的网站提供一个粘性 header ，但我似乎只能让它在桌面上运行。我在 Wordpress 上构建它(我构建了自己的主题)，这就是为什么我有 jQuery(document).ready(function( $ ) { 添加到代码中(否则 Wordpress 的 jQuery 与其他的冲突JQ)，所以请忽略该部分。

这是我正在使用的代码:

<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>

这是调用菜单项的 html/php:

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

这是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;
}

谁能弄清楚为什么这在移动设备上不起作用？

Answer 1

也许您在使用 jQuery 时遇到了问题，我刚刚使用 vanilla Javascript 为粘性导航创建了这个片段。它应该适用于移动设备，并根据您自己的需要进行调整。

   // 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>