2017-08-10 98 views
0

我想创建一个体面的滚动体验的移动菜单,我的想法是.fade在菜单中,并用.fadeOut淡出主站点包装,所以你得到一个更好的移动设备弹性滚动,没有glitchy位置:即使在iOS 10和Android上仍然存在的固定/正文滚动业务。存储body fadeOut之前的滚动位置,然后在body fadeIn之后返回滚动位置?

很明显,当包装显示时:没有任何物体变成视口的高度,它将页面跳转到顶部,一旦包装已经消失就可以返回旧的滚动位置了吗?

小提琴这里:https://jsfiddle.net/y1goy3b2/

任何帮助或问题将是巨大的!

干杯

<div class="menu" id="open-menu"> 
    <div class="menu-bttn"> 

    </div> 
</div> 
<div class="mob-menu"> 

</div> 
<div class="site-wrapper"> 
<p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Prodest, inquit, mihi 
eo esse animo. Non dolere, inquam, istud quam vim habeat postea videro; Et 
ille ridens: Video, inquit, quid agas; Hinc ceteri particulas arripere conati 
suam quisque videro voluit afferre sententiam. Inde sermone vario sex illa 
</p> 
</div> 
<script> 
$('#open-menu').click(function() { 
    $('.site-wrapper').fadeToggle('fast'); 
    $('.mob-menu').fadeToggle('fast'); 
}); 
</script> 
+1

查看我的回答 –

+0

@jigneshpatel非常感谢!它完美的作品:) –

回答

1

我已经更新您的提琴。请检查this

var oldScrollposition = 0; 
$('#open-menu').click(function() { 

    if($('.site-wrapper').is(":visible")){ 
    oldScrollposition = $(document).scrollTop(); 
    } 

    $('.site-wrapper').fadeToggle('fast'); 
    $('.mob-menu').fadeToggle('fast'); 

    $(document).scrollTop(oldScrollposition); 
});