taille de la fenêtre jquery bug

Question

En essayant de créer un modèle de page unique avec défilement parallaxe j'ai trouvé et problème étrange. Je soupçonne que le problème est soit dans la partie jQuery de peut-être même le CSS lui-même, mais je ne suis pas sûr.

Mon bit de code jQuery actuel lit la taille de la fenêtre du navigateur des visiteurs et ajuste la hauteur des diapositives pour chaque page ancrée différente. De cette façon, j'ai atteint plein avec des arrière-plans, peu importe la taille de la fenêtre. Mais en même temps je me suis rendu compte que si j'ajoute des composants CSS différents, ils ne développeront pas la hauteur d'arrière-plan de l'ancre active, mais déborderont plutôt sur l'autre diapositive.

Voici la partie jQuery responsable de la glisse hauteur

$(function() { 
    $('.windows').css({ 
     'height': (($(window).height())) + 'px' 
    }); 

    $(window).resize(function() { 
     $('.windows').css({ 
      'height': (($(window).height())) + 'px' 
     }); 
    }); 

}); 

Et voici l'URL du site https://docstax.net/esgh/

Aller aux plans et redimensionner votre navigateur, vous verrez ce que je veux dire par ne pas ajuster le haut de la diapositive en fonction du contenu nécessaire élevé à l'intérieur. Edit: Comme suggéré par putvande là où beaucoup de $ (fenêtre) que je connaissais, faites à ce que j'ai mis à jour et minimisé le code.

Answer 1

Fondamentalement, vous ne voulez pas ajouter manuellement un composant height au div si le contenu est trop grand pour le conteneur. Voici ce que je pense travaillerait:

$(window).bind("load", function()                                               
    {                                                     
     var windowHeight = $(window).height();                                           
     $('.windows').each(function(index) {                                           
      if ($(this).height() < windowHeight) {                                          
      $(this).height(windowHeight);                                            
      }                                                   
     }); 
     $(window).resize(function() { 
      var windowHeight = $(window).height();                                           
      $('.windows').each(function(index) {                                           
       if ($(this).height() < windowHeight) {                                          
        $(this).height(windowHeight);                                            
       }                                                   
      }); 
      }); 
     }); 

Answer 2

Vous pouvez essayer comme celui-ci:

<script type="text/javascript"> 
$(function(){ 
    var height = window.innerHeight; 
    $('.windows') .css({'height': height+'px'}); 
    $(window).resize(function() { 
     var reheight = window.innerHeight; 
     $('.windows') .css({'height': reheight+'px'}); 
    }); 
}); 
</script> 

Answer 3

J'ai essayé votre page, je ne pas voir un problème: Les sections sont redimensionnées comme ils le devraient . Le contenu est affiché comme il se doit compte tenu des styles appliqués. Lorsqu'une section est plus petite que son contenu, le contenu commence à saigner sur les autres pages. Parfaitement normal. Vous pouvez définir overflow: hidden; sur votre .windows pour empêcher cela et/ou utiliser des requêtes multimédias pour redimensionner le contenu.

Voici une fonction plus légère en passant, vient d'éditer votre code:

$(function() { 
    $(window).resize(function() { 
     $('.windows').css({ 'height': $(window).height() }); 
    }).resize(); 
}); 

Pas besoin d'écrire le code deux fois: la mise au gestionnaire de redimensionnement et le déclenchement, il doit manuellement faire. Écrivez-le une fois, donc quand vous avez besoin de le changer, vous le changerez une seule fois. Vous pouvez également réinitialiser de scrollTop dans votre gestionnaire de redimensionnement pour conserver le focus sur la même partie de la page.