Improve javascript menu logo code

Asked

Viewed 40 times

0

How can I improve this code? Throughout scroll He does this check and puts one on top of the other. It’s functional, but I find it very heavy and with many requests. Any hint as to how I can improve it?

function criaLogoPrincipal() {
  var logoMenuPrincipal = document.createElement("div");
  logoMenuPrincipal.classList.add("logo");
  logoMenuPrincipal.classList.add("col-xs-2");

  var imgMenu = document.createElement("img");
  imgMenu.src="img/logoBranco.png";
  imgMenu.classList.add("logoCor");

  logoMenuPrincipal.appendChild(imgMenu);

  return logoMenuPrincipal;
}   

function criaLogoSecundario() {
  var logoMenuBranco = document.createElement("div");
  logoMenuBranco.classList.add("logo");
  logoMenuBranco.classList.add("col-xs-2");
  var imgMenu = document.createElement("img");
  imgMenu.src="img/logo.png";
  imgMenu.classList.add("logoCor");
  logoMenuBranco.appendChild(imgMenu);

  return logoMenuBranco;
}

var paiLogo = document.querySelector(".second-logo-branco");
var logoMenuBranco = criaLogoSecundario();   
var logoMenuPrincipal = criaLogoPrincipal();   
paiLogo.appendChild(logoMenuPrincipal);

window.onscroll = function() {
  console.log(window.pageYOffset);

  if (window.pageYOffset > 42) {
    paiLogo.appendChild(logoMenuBranco);
  } else if (window.pageYOffset <= 42) {                
    paiLogo.appendChild(logoMenuBranco);
    paiLogo.appendChild(logoMenuPrincipal);
    paiLogo.removeChild(logoMenuBranco);            
  }

  /*console.log(window.pageYOffset);
    if (document.body.scrollTop < 10) {                      
      paiLogo.appendChild(logoMenuPrincipal);
    } else if(document.body.scrollTop >= 10) {                        
      paiLogo.appendChild(logoMenuBranco);
    }
  }*/             
}
javascript jquery code-review
  • 1

    What is the purpose of this?

  • Can you explain why you need to put the menu on top of each other like that? Can you explain what doesn’t work if you don’t do it like this?

1 answer

0

One of the things I would do is create a function and pass the image address to it as a parameter:

function criarLogo(endImagem) {
  var logoMenuPrincipal = document.createElement("div");
  logoMenuPrincipal.classList.add("logo");
  logoMenuPrincipal.classList.add("col-xs-2");

  var imgMenu = document.createElement("img");
  imgMenu.src = endImagem;
  imgMenu.classList.add("logoCor");

  logoMenuPrincipal.appendChild(imgMenu);

  return logoMenuPrincipal;
}

var paiLogo = document.querySelector(".second-logo-branco");
var logoMenuBranco = criarLogo("img/logo.png");   
var logoMenuPrincipal = criarLogo("img/logoBranco.png");   
paiLogo.appendChild(logoMenuPrincipal);

window.onscroll = function() {
  console.log(window.pageYOffset);

  if (window.pageYOffset > 42) {
    paiLogo.appendChild(logoMenuBranco);
  } else if (window.pageYOffset <= 42) {                
    paiLogo.appendChild(logoMenuBranco);
    paiLogo.appendChild(logoMenuPrincipal);
    paiLogo.removeChild(logoMenuBranco);            
  }            
}

Browser other questions tagged javascript jquery code-review

You are not signed in. Login or sign up in order to post.