Position: fixed ne fonctionne pas sur header par DavidBouhaben - page 1

Bonjour les génies.

J'essaie de faire bouger le header qui ressemble le logo et mon nav pour qu'il puisse bouger si je scroll vers le bas mais je n'arrive pas à le faire, j'essaie pendant 3 heures de faire avec plusieurs solutions mais rien ne fonctionne et je suis bloqué. J'essaye de mettre position: fixed; dans le css de header mais ca ne change rien.

Pouvez vous m'aider s'il vous plait et m'expliquer

Voici mon HTML

<!DOCTYPE html>
<html lang="fr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link
      href="https://fonts.googleapis.com/css?family=Roboto:100,900i"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="/public/css/style.css" />
    <link rel="stylesheet" href="/public/css/style.css.map" />
    <title>David Bouhaben ePortfolio</title>
  </head>
  <body class="" id="bodyId">
    <div id="navId" class="">
      <nav id="nav" class="nav">
        <ul>
          <li class="li">
            <a href="/about.html" class="nav__link nav__link--active"
              >Accueil</a
            >
          </li>
          <li class="li"><a href="#profil" class="nav__link">Profil</a></li>
          <li class="li">
            <a href="#portfolio" class="nav__link">Portfolio</a>
          </li>
          <li class="li"><a href="#CV" class="nav__link">CV</a></li>
          <li class="li"><a href="#Contact" class="nav__link">Contact</a></li>
          <li class="li">
            <a href="#Activité" class="nav__link">Activité Récente</a>
          </li>
          <!-- Langue, Anglais, Francais, Indonésien -->
          <li class="li">
            <a href="#langue" class="nav__link"
              ><img
                src="./public/image/Drapeau/France.png"
                alt="France"
              />Version Française</a
            >
          </li>
          <!-- ----------------------------------------------------- -->
          <div class="darkmode">
            <span id="darkmode-Text" class="dark__police"
              ><i class="far fa-lightbulb claire"></i>Mode claire</span
            >
            <input
              type="checkbox"
              name="darkmode"
              class="toggle"
              id="darkmode"
            />
            <label for="darkmode" class="toggleBtn"></label>
          </div>
        </ul>
      </nav>
    </div>
    <div class="loading--circle loading--full-hight">
      <div class="loading--box loading--full-hight"></div>
    </div>
    <div class="wrapper">
      <div class="container-header">
        <header id="header">
          <div id="home" class="wellcome logo-container">
            <h1 class="header__logo">
              <a href="/index.html"
                ><img
                  src="./public/image/Logo-david-bouhaben.png"
                  alt="Logo David Bouhaben"
              /></a>
            </h1>
            <div class="container-hamburger">
              <button class="hamburger-toggle">
                <span class="bar-top"></span>
                <span class="bar-mid"></span>
                <span class="bar-bot"></span>
              </button>
            </div>
          </div>
        </header>
      </div>
    </div>
    <script defer src="./public/JS/loading.js"></script>
    <script defer src="./public/JS/hamburger.js"></script>
    <script defer src="./public/JS/nav.js"></script>
    <script defer src="./public/JS/font-awesome-JS/all.js"></script>
    <script defer src="./public/JS/font-awesome-JS/all.min.js"></script>
    <script defer src="./public/JS/darkmode.js"></script>
  </body>
</html>

Et voici mon CSS, le header et la position: fixed commence sur la ligne 294 sur la classe

.container-headerheader {}

/*!
 * Font Awesome Free 6.0.0-beta3 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2021 Fonticons, Inc.
 */
:root, :host {
  --fa-font-regular: normal 400 1em/1 "Font Awesome 6 Free";
}

@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype");
}
.far,
.fa-regular {
  font-family: "Font Awesome 6 Free";
  font-weight: 400;
}

/*!
 * Font Awesome Free 6.0.0-beta3 by @fontawesome - https://fontawesome.com
 * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
 * Copyright 2021 Fonticons, Inc.
 */
:root, :host {
  --fa-font-solid: normal 900 1em/1 "Font Awesome 6 Free";
}

@font-face {
  font-family: "Font Awesome 6 Free";
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype");
}
.fas,
.fa-solid {
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}

body {
  box-sizing: border-box;
  background: #001534;
}
@media (max-width: 576px) {
  body {
    background: white;
  }
}

.bodyId {
  background-color: black;
}

.wrapper {
  display: none;
}

body {
  font-family: Verdana, "Geneva", Tahoma, sans-serif;
  color: #15dea5;
  font-size: 2rem;
  font-weight: 100;
  line-height: 1.7;
}

h1 {
  font-family: Verdana, "Geneva", Tahoma, sans-serif;
  font-weight: 900;
  font-size: 5rem;
  font-style: italic;
}

textarea {
  font-family: Verdana, "Geneva", Tahoma, sans-serif;
  font-weight: 100;
  font-size: 2rem;
}

button {
  font-family: Verdana, "Geneva", Tahoma, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 2.75rem;
}

.container-hamburger {
  padding: 0;
}
.container-hamburger .hamburger-toggle {
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
}
@media (max-width: 576px) {
  .container-hamburger .hamburger-toggle {
    visibility: visible;
    z-index: 99;
  }
}
.container-hamburger .hamburger-toggle:focus {
  outline-width: 0;
}
.container-hamburger .hamburger-toggle [class*=bar-] {
  background: #3bc1b0;
  display: block;
  transform: rotate(0deg);
  transition: 0.2s ease all;
  border-radius: 14px;
  height: 5px;
  width: 34px;
  margin-bottom: 6px;
}
.container-hamburger .hamburger-toggle .bar-bot {
  margin-bottom: 0;
}
.container-hamburger .opened .bar-top {
  transform: rotate(45deg);
  transform-origin: 2px 3px;
}
.container-hamburger .opened .bar-mid {
  opacity: 0;
}
.container-hamburger .opened .bar-bot {
  transform: rotate(-45deg);
  transform-origin: 0px 3px;
}

.loading--circle {
  display: flex;
  justify-content: center;
}
.loading--circle .loading--box {
  display: flex;
  justify-content: center;
}
.loading--circle .loading--box .percentage {
  color: white;
  font-size: medium;
  font-weight: 900;
  align-items: center;
  position: absolute;
}
@media (max-width: 576px) {
  .loading--circle .loading--box .percentage {
    color: black;
    font-size: medium;
    font-weight: 900;
    align-items: center;
    position: fixed;
  }
}
.loading--circle .loading--full-hight {
  align-items: center;
  position: fixed;
  /* or absolute */
  top: 25%;
  left: 45%;
}
@media (max-width: 576px) {
  .loading--circle .loading--full-hight {
    top: 25%;
    left: 45%;
  }
}
.loading--circle .loading--box::before {
  content: "";
  width: 70px;
  height: 70px;
  border: 10px solid #6c51a4;
  border-radius: 25%;
  transform: rotate(0.16turn);
  animation: loading--spin 1s ease infinite;
}
@media (max-width: 576px) {
  .loading--circle .loading--box::before {
    width: 70px;
    height: 70px;
    border-radius: 25%;
  }
}

.loading--circle::after {
  content: "";
  width: 60px;
  height: 60px;
  border: 10px solid #6c51a4;
  border-top-color: #2f435c;
  border-radius: 50%;
  transform: rotate(1turn);
  animation: loading--spin 0.3s ease infinite;
}
@media (max-width: 576px) {
  .loading--circle::after {
    width: 60px;
    height: 60px;
    border-radius: 50%;
  }
}

.loading--full-hight {
  align-items: center;
  position: fixed;
  /* or absolute */
  top: 25.5%;
  left: 46.5%;
}
@media (max-width: 576px) {
  .loading--full-hight {
    top: 25.5%;
    left: 46.5%;
  }
}

@media (max-width: 576px) {
  .nav .darkmode {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin: 0 0 15px 0;
  }
  .nav .darkmode__police {
    font-size: medium;
  }
  .nav .darkmode .toggle {
    display: none;
  }
  .nav .darkmode .toggleBtn {
    border: 3px solid #9e9191;
    border-radius: 16px;
    align-self: center;
    cursor: pointer;
    display: block;
    width: 70px;
    height: 30px;
    outline: 0;
    user-select: none;
    transition: 0.4s;
  }
  .nav .darkmode .toggleBtn::before {
    left: 1%;
    background-color: #9e9191;
    content: "";
    border-radius: 16px;
    width: 50%;
    overflow: hidden;
    height: 93%;
    position: relative;
    display: block;
    margin: 1px 0 0 0;
    cursor: pointer;
  }
  .nav .darkmode input:checked + .toggleBtn {
    background-color: #1e2a3a;
    border: 3px solid #6c51a4;
  }
  .nav .darkmode input:checked + .toggleBtn::before {
    animation: darkmode-active 0.4s ease-in-out 0s 1 normal forwards;
    margin: 1px 0 0px -2px;
    background-color: #6c51a4;
  }
  .nav .darkmode input:not(:checked) + .toggleBtn::before {
    animation: darkmode-desactive 0.4s ease-in-out 0s 1 normal forwards;
  }
}

.container-header {
  height: 500px;
  width: 100%;
  height: 400px;
  background: url(../../public/image/coffee-header.jpg);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: scroll;
}
.container-header header {
  box-shadow: none !important;
  background: white !important;
  position: fixed;
  width: 100%;
}
.container-header .wellcome {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 90%;
  margin: auto;
  bottom: 10%;
}
.container-header .logo-container {
  height: 200px;
  text-align: center;
}
.container-header .header__logo {
  z-index: 99;
}
.container-header img {
  height: 100%;
  width: 100px;
  z-index: 99;
}

#navId {
  display: none;
}

@media (max-width: 576px) {
  .nav {
    display: none;
    margin: 0 0 0 -10px;
  }
}

@media (max-width: 576px) {
  .nav-open {
    background-color: #fffaf1;
    height: 100%;
    position: fixed;
    width: 100%;
    animation: nav--open 1s ease-in-out 0s 1 normal forwards;
  }
  .nav-open .nav {
    display: block;
    position: absolute;
    top: 20%;
    left: 2.5%;
    text-align: center;
  }
  .nav-open .nav ul {
    display: inline-block;
  }
  .nav-open .nav ul .li:first-child {
    background-color: #0078d4;
    border-radius: 5%;
  }
  .nav-open .nav ul li {
    border-bottom: 1px solid #7a7a7a;
    padding: 20px;
    width: 100%;
    list-style: none;
    cursor: pointer;
    overflow: hidden;
  }
  .nav-open .nav ul li:last-child {
    border-bottom: 0;
  }
  .nav-open .nav ul li:nth-last-child(3) {
    border-bottom: 0;
    background-color: #821B72;
    border-radius: 5%;
  }
  .nav-open .nav ul li:nth-last-child(4) {
    border-bottom: 0;
  }
  .nav-open .nav ul li .nav__link {
    color: #3bc1b0;
    text-decoration: none;
  }
  .nav-open .nav ul li .nav__link--active {
    color: white;
  }
  .nav-open img {
    width: 6%;
    height: auto;
    margin: 0px 6px -5px 0px;
  }
  .nav-open .sombre {
    color: black;
    margin: 0 5px 0px 0px;
  }
  .nav-open .claire {
    color: #b4b400;
    margin: 0 5px 0px 0px;
  }
}

@media (max-width: 576px) {
  .nav-close {
    background-color: #fffaf1;
    height: 100%;
    position: fixed;
    width: 100%;
    animation: nav--close 1s ease-in-out 0s 1 normal forwards;
  }
  .nav-close .nav {
    display: block;
    position: absolute;
    top: 20%;
    left: 2.5%;
    text-align: center;
  }
  .nav-close .nav ul {
    display: inline-block;
  }
  .nav-close .nav ul .li:first-child {
    background-color: #0078d4;
    border-radius: 5%;
  }
  .nav-close .nav ul li {
    border-bottom: 1px solid #7a7a7a;
    padding: 20px;
    width: 100%;
    list-style: none;
    cursor: pointer;
    overflow: hidden;
  }
  .nav-close .nav ul li:last-child {
    border-bottom: 0;
  }
  .nav-close .nav ul li:nth-last-child(3) {
    border-bottom: 0;
    background-color: #821B72;
    border-radius: 5%;
  }
  .nav-close .nav ul li:nth-last-child(4) {
    border-bottom: 0;
  }
  .nav-close .nav ul li .nav__link {
    color: #3bc1b0;
    text-decoration: none;
  }
  .nav-close .nav ul li .nav__link--active {
    color: white;
  }
}

@media (max-width: 576px) {
  .nav-animation {
    background-color: #fffaf1;
    height: 100%;
    position: fixed;
    width: 100%;
    animation: menu 1.9s cubic-bezier(0.61, 0.74, 0.8, 0.65) 0s 1 normal forwards;
  }
  .nav-animation .nav {
    display: block;
    position: absolute;
    top: 20%;
    left: 2.5%;
    text-align: center;
  }
  .nav-animation .nav ul {
    display: inline-block;
  }
  .nav-animation .nav ul .li:first-child {
    background-color: #0078d4;
    border-radius: 5%;
  }
  .nav-animation .nav ul li {
    border-bottom: 1px solid #7a7a7a;
    padding: 20px;
    width: 100%;
    list-style: none;
    cursor: pointer;
    overflow: hidden;
  }
  .nav-animation .nav ul li:last-child {
    border-bottom: 0;
  }
  .nav-animation .nav ul li:nth-last-child(3) {
    border-bottom: 0;
    background-color: #821B72;
    border-radius: 5%;
  }
  .nav-animation .nav ul li:nth-last-child(4) {
    border-bottom: 0;
  }
  .nav-animation .nav ul li .nav__link {
    color: #3bc1b0;
    text-decoration: none;
  }
  .nav-animation .nav ul li .nav__link--active {
    color: white;
  }
}

/*# sourceMappingURL=style.css.map */

Voila le resultat de ce que j'ai fais:

Voilà ce que j'aimerais faire, le header suis la page si l'utilisateur descends vers le bas avec son souris par exemple

-
Edité par DavidBouhaben 22 décembre 2021 à 17:50:44

DavidBouhaben

22 décembre 2021 à 17:44:28

Lamecarlate

22 décembre 2021 à 19:01:04

Bonjour,

tu n'as pas de contenu en-dessous de ton header, donc le position: fixed semble ne pas avoir d'effet, mais il en a bien un, à mon sens.

J'ai pris ton HTML et ton CSS, les ai mis dans CodePen (j'ai dû supprimer le loader et enlever le display: none sur .wrapper sinon on ne voit rien), et en ajoutant des lignes de contenu, j'ai bien le comportement attendu d'un header fixé. Si ce n'est pas ce que tu veux, il nous faut plus de données

Pas d'aide concernant le code par MP, le forum est là pour ça :)

22 décembre 2021 à 19:12:37

Lamecarlate a écrit:

Bonjour,

tu n'as pas de contenu en-dessous de ton header, donc le position: fixed semble ne pas avoir d'effet, mais il en a bien un, à mon sens.

J'ai pris ton HTML et ton CSS, les ai mis dans CodePen (j'ai dû supprimer le loader et enlever le display: none sur .wrapper sinon on ne voit rien), et en ajoutant des lignes de contenu, j'ai bien le comportement attendu d'un header fixé. Si ce n'est pas ce que tu veux, il nous faut plus de données

Oui, je viens tout juste de comprendre. Depuis a toute à l'heure, je scroll vers le bas le navigateur en entier et non le navigateur du mobile qui est à l’intérieur mozilla hahaha XD

Position: fixed ne fonctionne pas sur header

Position: fixed ne fonctionne pas sur header

Supprimer

Modérer

Signaler le message aux modérateurs