我想给一个网站我在桌面和移动设备上建立一个粘性标题，我似乎只能让它在桌面上工作。我在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;
}
任何人都可以弄清楚为什么这不适用于移动设备？
答案 0 :(得分：0)
也许你遇到了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>