Faire Site Web Quitter Sauter vers le haut

Question

Donc, le problème est que chaque fois que ma couverture/modal apparaît sur mon site Web, il a tendance à faire revenir le site Web vers le haut.Je veux Voici des instructions pour émuler le problème, de sorte que vous pouvez le voir:

• Aller à ce lien: http://jsbin.com/saditujuli/edit?html,css,js,output

• Cliquez sur 'Exécuter avec JS' dans le coin supérieur droit. Faites défiler vers le bas de la 'sortie' section et cliquez sur la position: fixe, bleu ticker dans le
  coin supérieur droit. De là, vous pouvez voir le site web sauter derrière l'arrière-plan semi-transparent et vous pouvez également dire que lorsque vous quittez la (couverture, modal) le site Web est de retour en haut, donc il a sauté.

Lorsque le couvercle se lève, il est censé être la position: fixe afin qu'il ne move.It est destiné à rester en place lorsque le symbole bleu est cliqué au lieu de sauter, mais je n » Je sais comment y remédier.Toute aide est appréciée. Merci d'avance!

Answer 1

Si ceci est votre code d'origine:

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

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

J'ai changé '.container' à 'corps' et 'position: fixed/relative': caché/Scr » comme on le voit ici: débordement-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'); 
    }); 

Ceci arrête le retour en arrière-plan vers le haut et le défilement en arrière-plan lorsque le calque bleu est en bas.

EDIT: pour mobile, en essayant d'ajouter window.ontouchmove = preventDefault; comme ceci:

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

et le changement juste 'preventDefault' à 'null' lors de la fermeture de la boîte de dialogue. Que se passe-t-il si vous essayez de changer la position du conteneur en position fixe?

Answer 2

position:fixed; 

Answer 3

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

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

Modifier la position du conteneur: absolute