使网站退出页面顶部

问题描述：

因此，问题是每当我的网页/模式显示在我的网站上时，它往往会使网站跳回到顶端。我想要下面是说明来模拟问题，所以你可以看到它：使网站退出页面顶部

转到此链接：在右上角http://jsbin.com/saditujuli/edit?html,css,js,output
，单击 '运行与JS'。滚动至 “输出”部分的底部，然后单击位于
右上角的固定蓝色代码。
从那里，你可以看到网站从半透明封面背景后跳，你也可以告诉当你退出（封面，模式）网站回到顶部，所以它跳了起来。

当盖子出现，它被认为是位置：固定的，因此它不会move.It打算留在原地被点击，而不是跳跃的蓝色股票的时候，但我不”吨知道如何解决它。任何帮助表示感谢。提前感谢！

答

如果这是你原来的代码：

$('.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”到‘身体’和‘位置是：固定/相对’溢出-Y：隐藏/滚动”为在这里看到：

$('.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' 到 '空' 关闭对话框时。

那固定的跳转问题上的手机和PC，但在移动现在它仍然是滚动而不是位置：固定在盖上来。 –

您可以尝试使用我添加到我的答案中的移动编辑。 –

我用你的方式更新了jquery，但当退出按钮被点击时，我需要撤消preventDefault（）和stopPropagation（）的帮助，这样网站才会恢复正常。 http://jsbin.com/saditujuli/edit?html,css,js,output –

答

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

position:fixed;

这只会使内容不动。看看这里的问题的例子：http://jsbin.com/saditujuli/edit?html,css,js,output –

我认为这是他想要的 – evilrod

我的意思是啊。但我已经在jQuery中完成了。 –

答

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

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

更改容器的位置是：绝对

使网站退出页面顶部

相关推荐