Forum : Petit soucis de z-index

Bien le bonjour à vous !

Je suis en train de me faire un petit site one-page avec en gros un header fixe, présentation, portfolio et contact. Mon problème c'est que mon header que j'ai repris d' ici à comme une particularité, c'est qu'il recouvre toute la page. C'est assez étrange à vrai dire, je ne peux pas sélectionner le contenu comme si l'header recouvrait la page et du coup bah le filter jquery ne peut pas être efficace. Enfin tout un problème que je n'arrive pas à résoudre... Voici le site et s'il faut le code dites moi ;)

Merci de m'aider,
Astor

Et je viens de voir que l'effet de mon Header n'est plus fonctionnel...

EDIT : Je change un peu de thème mais c'est ça qui coince. Donc il y a deux appels de jquery.min.js, mais si je mets les deux, ça ne marche pas et si j'enlève celui de l'header le portfolio marche, mais plus l'header et vice et versa... :/ Help again...

<!-- appel pour l'header -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="js/waypoints.min.js"></script>
<!-- appel pour le portfolio -->
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
    <script src="js/jquery.quicksand.js"></script>
    <script src="js/script.js"></script>

Lotfi Berrahal

Réponse acceptée

Bonjour,
Pour ton soucis côté header personnellement j'ai enlevé le height:75% ligne 203

.ha-header-large {
height: 75%;
}

le rendu est pas plus moche et surtout tu n'a pas le header qui te prend une bonne partie de ta page.
Est tu obligé d'appelé deux fois jquery?
Quand tu enlève l'appel jquery 1.10.2 assure toi de bien metre le 1.6.1 avant l'appel waypoint.min.js
car si tu charge waypoint avant jquery ça ne risque pas de marcher :)

edit :
Tu peux tester un padding-top sur ce même bout de code

.ha-header-large{
padding-top: 30px;
}

Lotfi Berrahal

Réponse acceptée

en jquery il est possible d'agir sur le css d'un élément en fonction du scroll de cet élément ou du body.
tape scroll jquery si ça peut aider
tu peux t'inspirer de ce code si tu veux !

$(document).ready(function(){
            $(window).scroll(function(){
                var top = $('body').scrollTop();//récupère le scroll (le haut de ta barre de scroll)
                    limit = 164;// tu définis la limite où tu veux avoir ton effet
                if(top <= limit){
                    $('.nav').removeClass('class1');
                }else{
                    $('.nav').addClass('class1');
                }
            });
        })

ensuite dans ton css tu peux faire

.class1{
z-index : 2; /* tu met ton z-index inférieur ici*/
}

Astor

Auteur

Bonsoir,
Alors j'ai essayer avec le padding mais le padding ne s'applique pas vraiment à la div mais à son état d'une certaine manière c'est comme un margin.
Pour l'appel ça marche mais je met la 1.6.1 ou la 1.10.2 ?

Merci

Lotfi Berrahal

au vue de ton code test les deux et vois avec lequel les deux marche !
Si les deux marche alors prend la moins lourde en taille ! :)

Astor

Auteur

La 1.10.2 marche parfaitement ;)

Pour en revenir à mon problème d'header, est ce que je peux pas dire en jquery ou autre que quand la partie "filtre" du portfolio qu'arrivé à un moment du scroll son z-index change ? Et qu'il revienne à la normal quand l'header passe par dessus ? (Je sais pas si c'est très clair tout ça... ^^)

Astor

Auteur

Super merci !! Ça marche j'ai eu un peu de mal à régler le limit mais j'y suis arrivé !!!!

Petit soucis de z-index

6 réponses