Menu scroll "shrink" - réduire

Résolu/Fermé

ouistitiboy Messages postés 50 Date d'inscription dimanche 5 mai 2013 Statut Membre Dernière intervention 19 janvier 2018 - Modifié par ouistitiboy le 11/12/2015 à 20:19
ouistitiboy Messages postés 50 Date d'inscription dimanche 5 mai 2013 Statut Membre Dernière intervention 19 janvier 2018 - 12 déc. 2015 à 19:36

Salut à tous,

Script testé exclusivement sur Firefox 42.0 - Linux Mint*

Je suis entrain de réaliser une site onepage en local pour m'amuser. J'ai malheureusement quelque programme avec le Javascript. Petite explication :
-> Je veux réaliser un menu fixe que lorsqu'on descend sur la page rétrécit pour laisser plus de place au contenu. Je veux qu'au scroll, l'image disparaisse et que mon menu se réorganise. Plus fin et moins voyant.

-J'ai réussi à :
1) Fixer le menu au scroll
2) Le réduire un peu

-Je n'arrive pas à :
1) Faire disparaître l'image, et réorganiser le positionnement
2) Réduire plus drastiquement mon menu (les changements CSS (heigh) n'apportent rien lié probablement à l'image.

Voici mon code js:

/* MENU SCROLL */

$(window).scroll(function(){

  var scroll = $(window).scrollTop();

  if (scroll > 0 ) {
    $('nav').addClass('scrolled');
  }

  if (scroll <= 0 ) {
    $('nav').removeClass('scrolled');
 }

});

Le HTML correspondant:

<header class="headerstandard"> 
<img src='moi.jpg' class="moi" />
 <div class="headerstandard-inner"> 
  <h1>Curri<br>culum <br>Vitae</h1>
  
  <nav class="menu menustandard">
    <a class="target-section1 current" href="#section1">Accueil</a>
         <a class="target-section2" href="#section2">Avant-propos</a>
              <a class="target-section3" href="#section3">Compétences</a>
             <a class="target-section4" href="#section4">Parcours</a>
               <a class="target-section5" href="#section5">Loisirs</a>
      <a class="target-section6" href="#section6">Contact</a>
  </nav> 
 </div>

</header>

Et le CSS...

.scrolled { height: 50px }
.scrolled h1 {font-size: 3em;} /*Cette ligne ne change rien*/

J'ai trouvé ces script sur un tuto expliquant comment réduire le menu au scroll :

Mais ça fonctionne pas lorsque j'essaie de les adapter à mon site.
De plus, je sais pas si la solution est dans ce tuto (http://patrickroux.fr/web-internet/un-site-one-page-responsive-walkthrough-partie1-4161#point-de-vocabulaire ), j'veux supprimer une image au scroll pour réduire la barre de menu. Ici, ils expliquent comment rajouter une image au scroll (je ne trouve pas la fonction sur les scripts).
C'est tout, et c'est déjà bien compliqué ! Je me débrouille en HTML et CSS, mais commence à peine à piger le JS. Ça vient sûrement de là...

Est-ce qu'il y aurait une fonction "remove" pour supprimer un élément au scroll de la page et réduire le menu en conséquence ?

Je vous remercie pour votre aide !

ouistitiboy

A voir également:

Menu scroll "shrink" - réduire
Comment réduire la taille d'un fichier - Guide
Dvd shrink - Télécharger - Copie & Extraction
Menu déroulant excel - Guide
Reduire taille photo - Guide
Reduire clavier iphone - Guide

1 réponse

Réponse 1 / 1

Nhay Messages postés 838 Date d'inscription vendredi 2 novembre 2012 Statut Membre Dernière intervention 17 décembre 2015 126
11 déc. 2015 à 21:15

Bonjour,
Ton javascript ajoute/retire une class sur ton élément <nav>, le soucis c'est que ton img est en dehors de celui-ci.
Pour ne pas avoir ce problème, ajoute cette class sur la balise <html>

Tu pourra ensuite tout modifier en css :

.scrolled .menu{height:50px;}
.scrolled .menu h1{font-size:3em;}
.scrolled header img{display:none;}

Et ainsi de suite :)

ouistitiboy Messages postés 50 Date d'inscription dimanche 5 mai 2013 Statut Membre Dernière intervention 19 janvier 2018
12 déc. 2015 à 19:36

Ok merci beaucoup, j'essaie de suite. J'éditerais le titre ou le message en conséquence. :)

Discussions similaires