スティッキーヘッダーは、デスクトップでのみ動作し、モバイルでは動作しません。

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>