0
我有一個網頁帶有一個選項卡式的導航欄,是在頁面上的一些方法。該頁面具有響應性,因此窗口的高度和寬度可能會發生變化。我的代碼在桌面環境中工作正常,但是當我將其拉到iPhone或iPad上時,$(window).scroll
函數的響應速度很慢。我將向下滾動,並且只有當屏幕停止滾動時,我的功能纔會發生。它使我的固定導航延遲出現或消失。有什麼建議麼?下面的代碼示例:
HTML:
<div id="retail-nav">
<div id="navwrap">
<ul>
<li id="retail-tab-1"><a class="active"><i class="icon-list-alt"></i> <?php the_field(tab_1);?></a></li>
<li id="retail-tab-2"><a><i class="icon-lock"></i> <?php the_field(tab_2);?></a></li>
<li id="retail-tab-3"><a><i class="icon-lightbulb"></i> <?php the_field(tab_3);?></a></li>
</ul>
</div>
</div>
<div id="retail-nav-float">
<div id="navwrap-float">
<ul>
<li id="retail-tab-1-float"><a class="active"><i class="icon-list-alt"></i> <?php the_field(tab_1);?></a></li>
<li id="retail-tab-2-float"><a><i class="icon-lock"></i> <?php the_field(tab_2);?></a></li>
<li id="retail-tab-3-float"><a><i class="icon-lightbulb"></i> <?php the_field(tab_3);?></a></li>
</ul>
</div>
</div>
的JavaScript
var navHeight = jQuery('#retail-nav').offset().top;
jQuery(window).scroll(function() {
if(jQuery(window).scrollTop() > navHeight) {
jQuery('#retail-nav-float').css('display', 'inline');
}else{
jQuery('#retail-nav-float').css('display', 'none');
}
});
CSS:
#retail-nav{
width: 100%;
height: 55px;
background-color: #494949;
overflow: hidden;
position: relative;
}
#retail-nav-float{
width: 100%;
height: 55px;
background-color: #494949;
overflow: hidden;
position: fixed;
top:0;
display: none;
}
#navwrap, #navwrap-float{
height: 100%;
width: 100%;
max-width: 1012px;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: -13px;
text-align:center;
line-height: 55px;
}
我一直在試圖圍繞這個包裹我的頭,但我無法弄清楚如何實現這一點,可以有效地取代桌面上的滾動事件... – Watty