Bonjour,

je voudrais savoir si le code ci-dessous (qui permet de changer la couleur de la barre de menu)  si il y a moyen de le faire en plus simple éliminer des lignes inutiles ou autre et savoir aussi si c'est la bonne pratique ?

/**
 * Changement de couleur de la barre des menus
 *
 */

window.addEventListener("load", function () {
    if (window.innerWidth > 1025) {
        let sectionActive = document.querySelector('section'); // selection des sections où la condition sera remplie
        if (!sectionActive.classList.contains("section-page")) {
            window.addEventListener('scroll', function () {
                let nav = document.getElementById('nav-bar'); // selection de la barre des menus

                if (window.pageYOffset > 100 && window.pageYOffset < 610) {
                    nav.style.cssText = 'background-color: #ededed !important';
                } else if (window.pageYOffset > 610 && window.pageYOffset < 1431) {
                    nav.style.cssText = 'background-color: white !important';
                } else if (window.pageYOffset > 1431) {
                    nav.style.cssText = 'background-color: #869faa !important';
                } else {
                    nav.style.cssText = 'background-color: transparent !important';
                }

              
            });
        }
    }
});

-
Edité par snapzcorp 12 janvier 2020 à 18:22:56

Salut,

Il ne faut pas hésiter à faire des fonctions et à factoriser les tâches répétitives.

Je t'ai fais un petit exemple :

window.addEventListener("load", function () {
  const sectionActive = document.querySelector('section');
  const hasSectionPage = sectionActive.classList.contains("section-page");
  
  if (window.innerWidth > 1025 && !hasSectionPage) {
    window.addEventListener('scroll', handleScroll);
  }
});

function handleScroll () {
  const nav = document.getElementById('nav-bar');
  const bgColor = getBackgroundColor(window.pageYOffset);
  
  nav.style.cssText = `background-color: ${bgColor} !important`;
}

function getBackgroundColor(pos) {
  if (pos < 101) {
    return 'transparent';
  } else if (pos < 610) {
    return '#ededed';
  } else if (pos < 1431) {
    return '#fff';
  }
  
  return '#869faa';
}

Ici on a des fonctions de petite taille, qui se lisent facilement et rapidement

-
Edité par 7umpy 14 janvier 2020 à 22:26:24

Bonjour,

Si ta dernière question est:

Est-ce une bonne pratique d'appliquer du style (css) depuis un script javascript ?

La réponse, bien qu'elle n'engage que moi, est non. Non seulement ça diminue exponentiellement la maintenabilité du projet en question, mais en plus ça peu provoquer des bugs chez certain utilisateur (tout le monde n'active pas javascript par défaut).

Sinon si ta question c'est plutôt:

Est-ce une bonne pratique de factoriser un script javascript ?

La réponse est oui. Ça n'engage toujours que moi, néanmoins je pense qu'en réduisant la taille final du script on diminue le temps de chargement du fichier et donc que ça améliore les performances, en revanche ça ne doit pas ternir la lisibilité du script.

De même, utiliser un duplicata minifier permet d'augmenter les performances.

Bonjour snapzcorp,

Une autre proposition, tu pourrais faire :

window.addEventListener("load", function () {
  if (window.innerWidth > 1025) {
    let sectionActive = document.querySelector('section'); // selection des sections où la condition sera remplie
    if (!sectionActive.classList.contains("section-page")) {
      let nav = document.getElementById('nav-bar'); 
      window.addEventListener('scroll', function () {
        let bgColor = 'transparent';
        // selection de la barre des menus
        if (window.pageYOffset > 100 && window.pageYOffset < 610) {
          bgColor = ' #edede';
        } else if (window.pageYOffset > 610 && window.pageYOffset < 1431) {
          bgColor = 'white';
        } else if (window.pageYOffset > 1431) {
          bgColor = '#869faa';
        }
        this.style.backgroundColor = bgColor;
      }.bind(nav));
    }
  }
});

Perso j'aurai fait un truc comme cela, mais comme tu peux le voir on gagne pas au niveau code, mais j'aime bien car les choses sont bien séparées (mais bon c'est vraiment perso)

function setMenuColor(){ 
  // this = nav = document.getElementById('nav-bar')
  //valeur par défaut
  let bgColor ="transparent";
  /*
  Je pense qu'il y a un erreur dans les tests  :
  si window.pageYOffset = 610 ou window.pageYOffset = 1431
  alors bgColor ="transparent"
  */
  if (window.pageYOffset > 100 && window.pageYOffset < 610) {
    bgColor  = '#ededed';
  } else if (window.pageYOffset > 610 && window.pageYOffset < 1431) {
    bgColor  = 'white';
  } else if (window.pageYOffset > 1431) {
    bgColor = '#869faa';
  } 
  this.style.backgroundColor = bgColor;
  /*
  ne pas faire this.style.cssText = `....`;
  sinon tu remplace tout le contenu de l'attribut style
  */
}

function initMenuColor(){
  if (window.innerWidth > 1025) {
    //Si window.innerWidth <=  1025 alors pas besoin de faire un document.querySelector('section')
    let sectionActive = document.querySelector('section');
    if (!sectionActive.classList.contains("section-page")) {
      //Si sectionActive.classList.contains("section-page") == false alors pas besoin de faire un document.getElementById('nav-bar')
      let  nav = document.getElementById('nav-bar');
      //le fait de bind() document.getElementById('nav-bar') ne sera fait qu'une fois
      window.addEventListener('scroll', setMenuColor.bind(nav));
    }
  }
}//fct 

window.addEventListener("load", function () {
  initMenuColor()
  //inita()
  //initb()
});

Petite remarque : chez nous (en entreprise) on préfère opter pour la maintenabilité du code.

Mais on minimise toujours le js css et html, on gagne 20 à 30% du poids du ficher si je ne me trompe pas

-
Edité par AliasDmc 15 janvier 2020 à 19:32:09

Salut à tous !

c'est vrai que avec les fonctions le code est beaucoup plus lisible d'une part et je peux le réutiliser ( vous êtes tous d'accord à ce sujet) donc je vais essayer de toujours avoir ces 2 notions.

Si ta dernière question est: Est-ce une bonne pratique d'appliquer du style (css) depuis un script javascript ?

Oui c'est bien ça mais du coup, comment je peux faire je créé une class css et je l'appelle en JS ? 

Mais on minimise toujours le js css et html, on gagne 20 à 30% du poids du ficher si je ne me trompe pas

j’essaie mais c'est pas toujours évident pour une débutant comme moi j'ai déjà compris qu'il faut au maximum faire des fonctions

-
Edité par snapzcorp 22 janvier 2020 à 23:01:47

Bonjour snapzcorp,

Manipuler les valeurs de l'attribut class

Si ta css n'est pas prise en compte il y a de forte chance que cela soit du au Poids des sélecteurs Css