Position DIV en sticky

**filou80** · 14/07/2021, 16h50

Bonjour à tous,

Je travail sur mon projet de fin d'année, et je bloque sur un problème de div en sticky.
J'ai un div qui contient ma navbar ensuite j'ai une div qui contient mon titre de page et une troisième div qui contient le corp de site.
Je souhaite mettre ma div navbar en position fixe en haut et ma deuxième div coller a la première, et que lorsque l'on scroll c'est la troisième div qui passe sous les deux première.
Par contre quand je déroule mon menu le titre de la page reste dans le menu j'aurai aimer que le menu prenne le dessus.
Avant de passer le menu en position fixe il se dérouler et le site se décaler vers le bas maintenant le menu prend le dessus surtout.
Je ne sais pas si je suis clair dans mes explications.
J'utilise bootstrap.

Voici

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<body>
  <!-- Div generale -->
  <div class="container-fluid">
 
<div class="row navPerso">
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
      <div class="container-fluid">
        <a class="navbar-brand" href="#">titre du site</a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
          data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
          aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
          <ul class="navbar-nav me-auto mb-2 mb-lg-0">
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown"
                aria-expanded="false">
                Gestion
              </a>
              <ul class="dropdown-menu" aria-labelledby="navbarDropdown">
                <li><a class="dropdown-item" href="#">titre1</a></li>
                <li><a class="dropdown-item" href="#">titre2</a></li>
                <li><a class="dropdown-item" href="#">Titre 3</a></li>
                <li>
                  <hr class="dropdown-divider">
                </li>
                <li><a class="dropdown-item" href="#">Paramétres</a></li>
              </ul>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">3</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">4</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">5</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>
</div>
 
    <div class="container titlePage">
        <div class="row">
            <div class="col-5 d-flex titlePage">
                <p>titre</p>
            </div>
            <div class="col-2 d-flex">
                <p>autre titre</p>
            </div>
            <div class="col-5 d-flex flex-row-reverse">
                <div>logo</div>
            </div>
        </div>
    </div>
 
    <div class="container-fluid">
corps du site
  </div>

et voici mon

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
html, body{
    height: 100%;
}
body{
    background-image: url(/publics/assets/img/fond.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment:fixed;
}
.navPerso{
    position: sticky;
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 1;
}
.titlePage{
    position: fixed;
    width: 100%;
    top: 130px;  
}