粘性标头仅适用于台式机，不适用于移动设备

Question

我想提供一个在台式机和移动设备上构建粘性标头的网站，而且似乎只能在台式机上使用它。 我在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时遇到问题，我只是使用香草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>