1

所以，问题是每次我的封面/模态出现在我的网站上时，它往往会使网站跳回顶部。我想要这里是模拟问题的说明，所以你可以看到它：

  • 转到此链接： http: //jsbin.com/saditujuli/edit ?html,css,js,output

  • 单击右上角的“使用 JS 运行”。滚动到“输出”部分的底部，然后单击右上角的 position:fixed 蓝色标记
    。

  • 从那里，您可以看到网站从半透明封面背景后面跳转，您还可以看出当您退出（封面，模态）时，网站又回到了顶部，所以它跳转了。

当封面出现时，它应该是位置：固定，这样它就不会移动。它打算在点击蓝色股票时保持原位而不是跳跃，但我不知道如何修复它。任何帮助表示赞赏。在此先感谢！

4

3 回答 3

1

如果您尝试将容器位置更改为固定怎么办？

position:fixed;
于 2016-08-25T01:03:31.277 回答
0 
$('.responsive_click').on('click',function(){
    $('.cover').fadeIn('slow');
    $('.container').css('position','absolute');
  });

  $('.close-sign').on('click',function(){
    $('.cover').fadeOut('slow');
    $('.container').css('position','relative');
  });

更改容器位置：绝对

于 2016-08-25T07:19:03.870 回答
0

如果这是您的原始代码：

$('.responsive_click').on('click',function(){
        $('.cover').fadeIn('slow');
        $('.container').css('position','fixed');
    });

    $('.close-sign').on('click',function(){
        $('.cover').fadeOut('slow');
        $('.container').css('position','relative');
    });

我将 '.container' 更改为 'body' 并将 'position: fixed/relative' 更改为 overflow-y: hidden/scroll'，如下所示：

  $('.responsive_click').on('click',function(){
    $('.cover').fadeIn('slow');
    $('body').css('overflow-y','hidden');
  });

  $('.close-sign').on('click',function(){
    $('.cover').fadeOut('slow');
    $('body').css('overflow-y','scroll');
  });

这会阻止背景跳回顶部和背景滚动，同时蓝色标记叠加层向下。

编辑：对于移动设备，尝试window.ontouchmove = preventDefault; 像这样添加：

  $('.responsive_click').on('click',function(){
    $('.cover').fadeIn('slow');
    $('body').css('overflow-y','hidden');
    window.ontouchmove = preventDefault;
  });

并在关闭对话框时将“preventDefault”更改为“null”。

于 2016-08-25T01:03:02.467 回答