Mise en page avec une section et le menu

**stymax** · 08/06/2018, 15h07

Bonjour , je rencontre un petit problème mineur avec le scroll de page.
Je m'explique
- j'ai un menu fixe au top de ma page pour la navigation du site qui gère son opacity avec le scroll (cela c'est ok).
- mon menu section fonctionne lui aussi.

- Ce qui ne fonctionne pas quand je clic sur le menu section, quand je scroll au lieu de remonter jusqu'au dessus, la page ne prend plus en compte mon margin-top:100px, qui permettait à ma section de bien commencer.

pour avoir plus simple pour montrer mon problème, https://lumineco.000webhostapp.com/index.php?page=Bop

si on scroll sans clic sur le menu de droite (le menu section cela se passe bien niveau margin-top, on voit le titre et l image.
Si je clic sur la 3 ème section et que je remonte en scroll le margin ne fonctionne plus et le titre et l image sont sous le menu horizontal.
si quelqu'un a une idée sinon je changerai et verrais pour une autre configuration.

Merci d'avance pour vos réponses

**stymax** · 08/06/2018, 15h46

si besoin je peux fournir le code ici mais le site est en ligne donc plus simple pour y tester, mais c'est selon votre choix

**bonjourajax** · 08/06/2018, 16h27

Bonjour
Je ne comprends pas le prob
il est ou le menu section

**stymax** · 08/06/2018, 16h43

je poste cela mais pour voir le résultat un peu relou car sur la page avis cela fonctionne sans problème et sur la page bop du site cela passe pas .

Page bob

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
 <header id="main-header" class="side-menu">
  <nav>
    <ul>
      <li class="active"><a href="#home"><span>Qu'est-ce qu'un bop</span></a></li>
      <li><a href="#section-1"><span>Avantages</span></a></li>
      <li><a href="#section-2"><span>Certificats</span></a></li>
      <li><a href="#section-3"><span>Caractéristique du produit</span></a></li>
    </ul>
  </nav>
</header>
 
 <main>
  <section id="home">
    <div class="inner">
 
		      	<h1>Qu'est-ce qu'un BOP / PLEP?</h1>
 
 
	   <div class="col-md-12">	
				<div class="col-md-8">
				<p><font color="red">B</font>ase <font color="red">O</font>f <font color="red">P</font>lasma/ <font color="red">P</font>lasma <font color="red">L</font>ight <font color="red">E</font>mitting <font color="red">P</font>olymer</p>
				<p>Base de polymère émettant de la lumière plasma </p>
				</div>
 
				<div class="col-md-12">
				<p>La technologie <font color="red">BOP</font> / <font color="red">PLEP</font> fonctionne en utilisant des matériaux électroluminescents comme composants principaux. </p>
 
			   	</div>
	 </div> 
</div> 	
  </section>
 
  <section id="section-1">
    <div class="inner">
      <h2>Avantages</h2>
 
 
 
		<p>Ses avantages immédiats sont l’efficacité de l’espace parce que sa taille est beaucoup plus petite que les systèmes existants, les matériaux existants sont utilisés, il est très facile à installer et son intensité peuvent être adaptées aux besoins des clients.
La base de la technologie plasma est résistant aux intempéries, même peut être immergé dans l’eau et travaille toujours. Leur espérance de vie est jusqu’à 100.000 heures, avec une consommation réduite jusqu’à 80% avec d’autres technologies.</p>
<p>AVANTAGES
</p>
 
    </div>
  </section>
 
  <section id="section-2">
    <div class="inner">
      <h2>Certificats du produit</h2>
    </div>
  </section>
 
  <section id="section-3">
    <div class="inner">
      <h2>Caractéristique du produit</h2>
      <p> ans.</p>
      <p>réduite.</p>
      <p>Le Aucun entretien.</p>
      <p>Résistant aux températures comprises entre -40°C et +70°C
		 l’eau</p>
	  <p>Angle 100%	</p>
 
    </div>
  </section>
</main>
<script src="scripts/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() >0){
          $(".navbar-header").css({"opacity": "0.5"})
        }
        else {
          $(".navbar-header").css({"opacity": "1"})
        }
    })
  })
 
</script>  
<script src="scripts/menuspy.min.js"></script> 
<script>
    var elm = document.querySelector('#main-header');
    var ms = new MenuSpy(elm);
 </script>

la page avis qui fonctionne sans problème

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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<header id="main-header" class="side-menu">
  <nav>
    <ul>
      <li class="active"><a href="#home"><span>Recommandations</span></a></li>
      <li><a href="#section-1"><span>Durée de vie</span></a></li>
      <li><a href="#section-2"><span>Section 2</span></a></li>
      <li><a href="#section-3"><span>Section 3</span></a></li>
    </ul>
  </nav>
</header>
 
<main>
  <section id="home">
    <div class="inner">
      <h1>Recommandations concernant le Bop</h1>
    	<div class="col-md-8 marginPara">
		<p><font color="#393f44">Martí Boada</font>, scientifique environnemental, géographe,</p>
		<p>Prix Global 500 Roll of Honour des Nations Unies.</p>
		<p>L’augmentation  augmentation de 2°C.</p></div>
 
		<div class="col-md-4 marginPara"><img src="images/Boada.jpg" width="150px" height="180px" /></div>
 
		<div class="col-md-12"><p>Les chiffres planète.</p></div>
    </div>
  </section>
 
  <section id="section-1">
    <div class="inner">
      <h2>ENGAGEMENT DURABLE DU BOP</h2>
    <div class="col-md-4 marginPara">
		<div class="circle-A">
			<div class="titlecircle">
				<div class="titlecircle1">Changement</div>
				<div class="titlecircle2">Climatique</div>
			</div>
 
		</div>
		<p>Réchauffement ambiant :
		Emission de 30% moins
		de chaleur
		Réduction des émissions
		de CO² : 55% de moins
		qu’une lumière
		traditionnelle et 25% de
		moins que la LED
		Ne contient pas de
		mercure ou de gaz
		toxique</p>
		</div>
		<div class="col-md-4 marginPara">
		<div class="circle-B">
			<div class="titlecircle">
				<div class="titlecircle1">Pollution</div>
			<div class="titlecircle2">Lumineuse</div>
			</div>
 
		</div>
 
		<p>Minimiser la pollution
		lumineuse
		Eviter la dispersion de la
		lumière
		Eradiquer la lumière
		intrusive ou gênante</p></div>
		<div class="col-md-4 marginPara">
		<div class="circle-C">
			<div class="titlecircle">
				<div class="titlecircle1">Cycle de vie
				</div>
			<div class="titlecircle2">Du produit</div>
			</div>
 
		</div>
 
		<p>Produit 100 recyclable
		Matériel biodégradable
		Gestion des déchets
		durables</p></div>
 
    </div>
  </section>
 
  <section id="section-2">
    <div class="inner">
      <h2>Section 2</h2>
    </div>
  </section>
 
  <section id="section-3">
    <div class="inner">
      <h2>Section 3</h2>
    </div>
  </section>
</main>
<script src="scripts/jquery-3.3.1.min.js"></script>
 
<script type="text/javascript">
  $(document).ready(function(){
    $(window).scroll(function(){
        if($(this).scrollTop() >0){
          $(".navbar-header").css({"opacity": "0.5"})
        }
        else {
          $(".navbar-header").css({"opacity": "1"})
        }
    })
  })
 
</script>  
<script src="scripts/menuspy.min.js"></script>   
<script>
    var elm = document.querySelector('#main-header');
    var ms = new MenuSpy(elm);
 </script>

Donc le menu section sur le site est placé sur la droite en position fixe.
La différence entre c'est deux pages est le rendu quand je scroll, sur la page avis pas de problème en utilisant le menu section puis le scroll, ou juste le scroll.
L'erreur se passe sur la page bob en fesant le scroll de la souris quand on remonte on voit correctement quand on utilise le menu section puis on scroll pour remonter le padding existe plus alors qu il est toujours dans les info de la page,
et donne le résultat que le titre h1 est en dessous du menu . voila je ne sais pas quoi expliqué en plus sur le problème