Surligner menu en fonction position (one page)

[mucide]

Bonjour à tous,

Je réalise une boutique One page, avec des ancres qui permettent donc de scroller automatiquement à l'aide du menu.

J'ai donc plusieurs ancres sur ma page (que j'ai placé dans le page builder).

Lorsque je passe ma souris sur le menu, celui-ci souligne le titre survolé (voir image):

Mon menu est "flottant" (descend avec la page, donc fixe sur l'écran)

 

Comment puis-je faire en sorte que mon menu souligne automatiquement la partie ou je me situe sur la page? 

 

Merci à vous pour votre aide !

 

[Performance Agency]

Bonjour,

Vous pouvez gérer cela en mettant une classe "active" sur chaque menu lorsque vous atteigné une hauteur de scroll précise.

Par exemple entre 0 et 600px, on ajoute la class active au premier menu.

Entre 600 et 1200px, on ajoute la class active au second menu tout en supprimant la class active des autres menus.

 

 

[mucide]

 

Merci pour ce retour,

Je précise que j'apprends,

Techniquement comment pourrais-je l'appliquer ? pourriez-vous me donner un exemple de code et le fichier à éditer ? 

[mucide]

J'imagine que je dois trouver le fichier html qui contient mon menu ? Je n'arrive pas à le localiser.. 

 

[mucide]

Je me permet un petit up  
Pourrait-on m'avancer sur la base de la réponde de @performance agency ? Je n'arrive pas à l'appliquer 

[Performance Agency]

Bonjour,

Tu n'as pas besoin de modifier ton html de menu, tu dois gérer cela directement en JS, par exemple sur ton global.js présent dans ton dossier js.

Fais quelque chose comme ceci :

$(window).scroll(function() {
  if($(window).scrollTop() > 200){
  	$('.tesmenus').removeClass('active');
    $('.tonmenu2').addClass('active');
  }
  if($(window).scrollTop() > 400){
  	$('.tesmenus').removeClass('active');
    $('.tonmenu2').addClass('active');
  }
});

 

Edited August 20, 2018 by Performance Agency (see edit history)

[mucide]

52 minutes ago, Performance Agency said:

Bonjour,

Tu n'as pas besoin de modifier ton html de menu, tu dois gérer cela directement en JS, par exemple sur ton global.js présent dans ton dossier js.

Fais quelque chose comme ceci :

$(window).scroll(function() {
  if($(window).scrollTop() > 200){
  	$('.tesmenus').removeClass('active');
    $('.tonmenu2').addClass('active');
  }
  if($(window).scrollTop() > 400){
  	$('.tesmenus').removeClass('active');
    $('.tonmenu2').addClass('active');
  }
});

 

 

Merci c'est plus clair avec ça ! 

Nouvelle question, comment je peux trouver mes variables menus ('.tesmenus";".tonmenu2") ?

 

Merci de votre aide,

[Performance Agency]

Ton menu possède une classe, par exemple sf-menu

Puis tu cibles tes menus selon tes classes :

.sf-menu li:nth-child(1) pour le deuxième ...

.sf-menu li:nth-child(2) pour le deuxième ...