position sticky

Ce sujet est résolu
Default
,

Bonjour,

Voilà je rencontre un petit problème avec mon code, dès que je sors de ma section ma top bar "nav" en position: sticky disparaît dès que je sors de la section et que je rentre dans le header. Qu'est-ce que je dois rajouter pour que ma toolbar reste tout le long de la page? Mercii ;)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css?family=Roboto:100,400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,300i,400,400i,600,600i,700,700i,800,800i" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <title>DEVFLO.FR</title>

</head>
<body>

<section class="section">

    <div class="bg-intro">

        <h1 class="nom"><span class="mauberger"><span class="mau">mau</span>berger</span> <span class="florian">florian</span></h1>
        <p class="description">Lycéen, passionné par le developpement</p>


    <nav>
        <a class="a-navv" href="index.html">Accueil</a>
        <a class="a-navv" href="#ap">A propos</a>
        <a class="a-navv" href="#cpts">Compétences</a>
        <a class="a-navv" href="">Expériences</a>
        <a class="a-navv" href="">Réalisations</a>  
    </nav>

        <h1 class="titre"><span class="bvn">BIENVENUE SUR </span><span class="devflo">devflo.fr</span></h1>

    </div>

</section>

<header>

    <div class="apropos" id="ap">

        <h1 class="tapropos"><span class="apro">A pro</span>pos</h1>

        <h1 class="moi"><span class="fw800">MAUBERGER Florian</span>, <span class="fw100">developpeur front end</span></h1>

        <p class="para_a_propos">Lorem ipsum dolor sit amet consectetur adipisicing elit. Blanditiis<br> cupiditate laudantium voluptate quidem, tempore, magnam <br>veritatis vitae nemo, incidunt labore explicabo molestias<br> nesciunt! Nostrum pariatur sapiente repellendus.
        </p>


        <ul>
            <li>Nom : Mauberger Florian</li>
            <li>E-Mail : <a class="email" href="mailto:florian.mauberger@gmail.com?subject=Website&body=Bonjour,">florian.mauberger@gmail.com</a></li>
            <li>Téléphone : +33(6)99687007</li>
        </ul>

        <a href="#" class="fa fa-twitter"></a>
        <a href="#" class="fa fa-facebook"></a>
        <a href="#" class="fa fa-youtube"></a>
        <a href="#" class="fa fa-instagram"></a>

    </div>

    <div class="competences" id="#cpts">
        <h1 class="tcpts" id="cpts">Compétences</h1>
    </div>


</header>

<script>
window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth' <pre rel="HTML"><code markup="tt" class="language-markup">
});

window.scrollBy({ 
  top: 100, 
  left: 0, 
  behavior: 'smooth' 
});

document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth'
});
</script>

</body>
</html>
body{
    font-family: 'Roboto', sans-serif;
    font-family: 'Open Sans', sans-serif;
    margin: 0;
    width: 100%;
    height: 100%;
    font-size: 16px;
}

html{
    scroll-behavior: smooth;
}

:-moz-selection{
color: #e7802e;;
background: #FFF;
}


::-moz-selection{
color: #e7802e;;
background: #FFF;
}


::selection{
color: #e7802e;;
background: #FFF;
}

a{
    text-decoration: none;
}


section, .bg-intro{
    position: absolute;
    top: 0;
    width: 100%;
    height: 500px;
    background-color: black;
    color: #FFF;
}

.nom{
    margin-left: 3.1%;
}

.mauberger{
    text-transform: uppercase;
    font-weight: bold;
    color: #FFF;
}

.mau{
    display:inline-block;
    border-bottom: 3.5px solid #FFF;
    padding-bottom: -1px;
}

.florian{   
    text-transform: capitalize;
    font-weight: lighter;
}

.description{
    margin-left: 3.1%;
    font-weight: 300;
}

nav section{
    position: -webkit-sticky;
    position: sticky;
    float: right;
    top: 20px;
    margin-top: -90px;
    margin-right: 5%;
    font-size: 17px;
}

.a-navv{
    padding: 15px;
    color: #FFF;
    text-decoration: none;
}

.a-navv:hover{
    color: rgb(231, 126, 46, .5);
    -webkit-transition: color 1s;
    -o-transition: color 1s;
    transition: color 1s;
}

.titre{
    font-weight: none;
    margin-top: 130px;
    margin-left: 30%;
    color: #FFF;
    font-size: 55px;
    text-transform: uppercase;
    -webkit-animation: slidetitle 4s;
            animation: slidetitle 4s;
}

.bvn{
    font-family: 'Roboto', sans-serif;
    font-weight: 100;
}

.devflo{
    font-weight: bold;
    -webkit-animation: opacity 4s;
            animation: opacity 4s;
}

header{
    color: black;
}

nav{
    position: -webkit-sticky;
    position: sticky;
    float: right;
    top: 20px;
    margin-top: -90px;
    margin-right: 5%;
    font-size: 17px;
}


.tapropos{
    margin-top: 75px;
    margin-left: 60px;
}

.apropos{
    font-size: 14px;
    margin-top: 500px;
    position: absolute;
    width: 100%;
    height: 465px;
    background-color: #DFE7EE;
}

.apro{
    display:inline-block;
    border-bottom: 3.5px solid #e7802e;
    padding-bottom: 3px;
}

.moi{
    font-size: 15px;
    margin-left: 60px;
}

.fw800{
    font-weight: 800;
}

.fw100{
    font-weight: 100;
}

.para_a_propos{
    margin-left: 60px;
}

ul{
    margin-left: 20px;
}

li{
    list-style-type: none;
}

.email{
    color: #e7802e;
}

.fa {
    padding: 10px;
    font-size: 30px;
    width: 20px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    -webkit-animation: fa 4s;
            animation: fa 4s;
  }


.fa-twitter {
    margin-left: 60px;
    background: #000;
    color: white;
  }

  .fa-twitter:hover {
    margin-left: 60px;
    background: #000;
    color: white;
    -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
            transform: scale(1.2); 
    -webkit-transition : -webkit-transform .7s; 
    transition : -webkit-transform .7s; 
    -o-transition : transform .7s; 
    transition : transform .7s; 
    transition : transform .7s, -webkit-transform .7s;
  }

  .fa-facebook {
    margin-left: 10px;
    background: #000;
    color: white;
  }

  .fa-facebook:hover {
    margin-left: 10px;
    background: #000;
    color: white;
    -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
            transform: scale(1.2); 
    -webkit-transition : -webkit-transform .7s; 
    transition : -webkit-transform .7s; 
    -o-transition : transform .7s; 
    transition : transform .7s; 
    transition : transform .7s, -webkit-transform .7s;
  }

  .fa-youtube {
    margin-left: 10px;
    background: #000;
    color: white;
  }

  .fa-youtube:hover {
    margin-left: 10px;
    background: #000;
    color: white;
    -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
            transform: scale(1.2); 
    -webkit-transition : -webkit-transform .7s; 
    transition : -webkit-transform .7s; 
    -o-transition : transform .7s; 
    transition : transform .7s; 
    transition : transform .7s, -webkit-transform .7s;
  }

  .fa-instagram {
    margin-left: 10px;
    background: #000;
    color: white;
  }

  .fa-instagram:hover {
    margin-left: 10px;
    background: #000;
    color: white;
    -webkit-transform: scale(1.2);
        -ms-transform: scale(1.2);
            transform: scale(1.2); 
    -webkit-transition : -webkit-transform .7s; 
    transition : -webkit-transform .7s; 
    -o-transition : transform .7s; 
    transition : transform .7s; 
    transition : transform .7s, -webkit-transform .7s;
  }

 @-webkit-keyframes slidetitle {
      from{
        -webkit-transform: translateY(200px);
                transform: translateY(200px);
        opacity: 0;
      }

      to{
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
      }
  }

 @keyframes slidetitle {
      from{
        -webkit-transform: translateY(200px);
                transform: translateY(200px);
        opacity: 0;
      }

      to{
        -webkit-transform: translateY(0);
                transform: translateY(0);
        opacity: 1;
      }
  }


  @-webkit-keyframes opacity {
      30%{
          opacity: .5;
      }

      50%{
          copacity: .4;
      }

      70%{
        opacity: .6;
      }

      80%{
        opacity: .8;
      }

      90%{
        opacity: .9;
      }

      100%{
          opacity: 1;
      }
  }


  @keyframes opacity {
      30%{
          opacity: .5;
      }

      50%{
          copacity: .4;
      }

      70%{
        opacity: .6;
      }

      80%{
        opacity: .8;
      }

      90%{
        opacity: .9;
      }

      100%{
          opacity: 1;
      }
  }

  @-webkit-keyframes fa {
    from{
      -webkit-transform: translateY(200px);
              transform: translateY(200px);
    }

    to{
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
}

  @keyframes fa {
    from{
      -webkit-transform: translateY(200px);
              transform: translateY(200px);
    }

    to{
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
}

.competences{
        font-size: 14px;
        margin-top: 965px;
        position: absolute;
        width: 100%;
        height: 600px;
        background-color: #d7dfe5;
    }

.tcpts{
    margin-top: 75px;
    margin-left: 60px;
}

@media screen and (max-width: 1100px) {

   .nom{
       margin-top: 20px;
       text-align: center;
   }

   .description{
        text-align: center;
   }


    nav{
        margin-right: 7rem;
        margin-top: 0px;
        text-align: center;
        white-space: pre;
    }

    .titre{
        margin-left: 4rem;
        font-size: 20px;
    }

    .bvn{
        text-align: center;
    }

    .section{
        width: 100%;
    }
}

6 Réponse

35326
,

Salut,

  • ton CSS est mal fait, toutes tes position: absolute; sont inutiles. A cause de ça, tu ajoutes des margin un peu partout, on voit que c'est bricolé et c'est de là que viennent tes problèmes
  • sur ta navbar, tu as mis un position: sticky;, qui dépend du parent, il faut mettre position: fixed. qui est relatif à la page
  • tu utilises les float mais il faut éviter, essaie d'utiliser les flexbox, c'est plus facile et moins contraingnant
  • la balise h1 doit être présente qu'une seule fois sur la page

Ta page en elle même est jolie, mais tu as des lacunes qui font que tu as 3 fois plus de CSS qu'il ne faudrait. Mais tu es sur la bonne voie pour réussir. A mes début je faisais aussi beaucoup d'erreurs.

J'ai refais ta page (sans le responsive) avec mon expérience de dev, en corrigeant tes erreurs https://codepen.io/Balsakup/pen/jdezaK et en essayant de reproduire ce que tu attends.

17162
,

Bonjour.
En plus des remarques que t'a fait Balsakup :

  • La valeur de l'attribut id doit être unique dans un document :

L'attribut universel id définit un identifiant unique qui doit être unique pour l'ensemble du document. Le but de cet attribut est de pouvoir identifier un élément lorsqu'on crée un lien, qu'on souhaite le manipuler avec un script ou qu'on le met en forme avec CSS.

  • La balise p est de type block contrairement à la balise span qui est de type inline, il est donc illogique de placer une balise p à l'intérieur d'une balise span :

L'élément HTML <span> est un conteneur générique en ligne (inline) pour les contenus phrasés.
... <span> est un élément en ligne.

L'élément HTML <p> représente un paragraphe de texte.
... Les paragraphes sont des éléments blocs.

Default
,

Merci beaucoup je vais essayer de résoudre tous ces problèmes, je débute et je suis souvent confronté à des erreurs dues à mon code, je pense que je ne connais pas assez les propriétés que j'utilise^^ ton commentaire m'a fait très plaisir.
As-tu des conseils pour que je m'améliore appart de pratiquer, pratiquer et de connaitre spécifiquement chaques propriétés?

35326
,

Salut,

Pour t'améliorer, tu l'as dit toi même, il faut pratiquer, pratiquer et pratiquer. Essaie de reproduire des sites que tu aimes bien, utilises ton inspecteur de code sur des sites pour voir comment ils ont fait, regarde les vidéos de Grafikart, j'ai commencé avec Grafikart et ma curiosité m'a aidé à faire le reste.

Twitter aussi m'a aidé, surtout pour la veille technologique, suis des blogs de développeur, lis la MDN (Mozilla Developer Network)

Default
,

Salut,
Je prends note, merci pour tes conseils, je vais continuer à pratiquer toute façon je vois même pas les heures passées dès que je suis dans le code :o!
J'ai refait ma page sans les positions absolutes et rajouter un reset css en essayant de rendre simple mon code et qu'il soit beaucoup plus compact j'en suis à la rubrique réalisations avec moins de lignes de CSS que quand j'étais à la rubrique compétences ;)

https://codepen.io/devflo/pen/jdXVWN

Default
,

Bonjour Lartak,
Merci pour tes conseils je viens des corrigés je m'étais mélangé avec les id et class my bad); et pour les spans et paragraphes aussi, je ne connais pas encore toutes les propriétés des éléments que j'utilise c'est pour ça que je fais défois des choses inutiles.