Discussion :

[labarre2002]

Bonjour

Je réalise cette page



je souhaite que la zone encerclée en vert sois fixe c-a-d que pendant le scroll vers le bas elle ne bouge pas .

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
69
<main class="content">
 
       <div class="central">
         <div class="inner">
                <div class="wrapper">
                    <div class="menu">
                        <a href="#"> <span class="burger"></span> Menu</a>
                    </div>
                        <div class="title">
                                    <span class="titleSpace">Space</span>
                        </div>
 
                     <div class="start">
                           <a href="#"><span>Start a Project</span><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="arrow"><path d="M16.0037 9.41421L7.39712 18.0208L5.98291 16.6066L14.5895 8H7.00373V6H18.0037V17H16.0037V9.41421Z"></path></svg></i>
                           </a>
                     </div>   
              </div>
 
          <div class="central_c">
               <div class="titre">
                      <div class="animation">
                          <span>a tor-tier</span>
                      </div>
                              <div class="animation">
                                   <span>architecture</span>
                              </div>
                                  <div class="animation">
                                      <span>
                                          & interior  
                                      </span>
                                  </div>  
 
                              <div class="animation">
                                  <span>design</span>
                              </div>
                      <div class="animation">
                          <span>company</span>
                      </div>
               </div>
 
            <div class="pic1 im">
              <img src="assets/jumeirah.jpg" alt="Jumeirah villa">
            </div>
 
            <div class="pic2 im">
              <img src="assets/interior.jpg" alt="interieur villa">
            </div>  
 
 
            <div class="project">
                      <div class="featured">
                            <span>featured projects</span>
                      </div>
 
                       <h2> <span>500+ projects</span> completed</h2>
                           <div class="scroll">
 
 
                           </div>        
            </div>
 
          </div>
 
 
         </div>
 
        </div>
 
    </main>

dans mon code la div concernée est celle ayant la classe .wrapper

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
22
23
.central{
    width: 70%;
    height: 75%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 12% 1fr;
    background-color: var(--bg-content);
    overflow-y: scroll;
    }
 
.inner{
    position: relative;
 
}
 
.central_c{
    position: relative;
   }
 
.wrapper{
    display: flex;
    border-bottom: 1px solid white;
 }

le soucis est que lorsque j 'affecte

Code css :

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

1
2
3
4
5
.wrapper{
    display: flex;
    border-bottom: 1px solid white;
  position:fixed;
 }

a ce block en espérant le fixer j obtiens ce rendu



Pourrais-je avoir des pistes en vue de transcender cet aspect de problème ?

Merci.