【问题标题】:Store scroll position before body fadeOut, then return scroll position after body fadeIn?在bodyfadeOut之前存储滚动位置,然后在bodyfadeIn之后返回滚动位置?
【发布时间】:2017-08-10 05:56:10
【问题描述】:

我想为移动菜单创建一个不错的滚动体验,我的想法是使用 .fadeIn 菜单,并使用 .fadeOut 淡出主站点包装,这样您就可以在移动设备上获得更好的弹性滚动,而无需故障位置:即使在 iOS 10 和 Android 上仍在发生的业务下方的固定/正文滚动。

很明显,当包装器是 display:none 时,body 变成了视口的高度,这会将页面跳到顶部,一旦包装器淡入,是否可以返回旧的滚动位置?

在这里提琴: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>

【问题讨论】:

  • 检查我的答案
  • @jigneshpatel 非常感谢!它完美地工作:)

标签: javascript jquery html css user-experience


【解决方案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);
});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-02-24
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多