0

Como posso melhorar esse código? Em todo scroll ele faz essa verificação e coloca um em cima do outro. Está funcional, mas acho muito pesado e com muitas requisições. Alguma dica de como posso melhorá-lo?

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);
    }
  }*/             
}
2
  • 1
    Qual o objetivo disso? Commented 22/08/2017 às 17:59
  • Podes explicar porque precisas de colocar o menu um em cima do outro dessa maneira? podes explicar o que não funciona se não fizeres assim?
    – Sergio
    Commented 23/08/2017 às 3:45

1 Resposta 1

0

Uma das coisas que eu faria é criar só uma função e passar pra ela o endereço da imagem como parâmetro:

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);            
  }            
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .