Script che funziona solo con TAG senza ID e CLASS

[ivanisevic82]

Ciao a tutti, sto utilizzando il seguente codice javascript (+ html e css ovviamente) per implementare un effetto di colorazione dell'header (contenente anche la bassa di navigazione) allo scorrere della pagina.

Script:

<script>var className = "inverted";
var scrollTrigger = 60;


window.onscroll = function() {
  // We add pageYOffset for compatibility with IE.
  if (window.scrollY >= scrollTrigger || window.pageYOffset >= scrollTrigger) {
    document.getElementsByTagName("header_sfondo")[0].classList.add(className);
  } else {
    document.getElementsByTagName("header_sfondo")[0].classList.remove(className);
  }
};
</script>

CSS:

header_sfondo {  transition: background-color 0.5s ease;
  background-color: #444444;
  margin: 0;
  padding: 0;
  position: fixed;
  text-align: center;
  top: 0;
}


header_sfondo.inverted {
  background-color: #fff;
}


header_sfondo.inverted a {
  color: #0e436b;

}

Html:

 <header_sfondo>                <ul id="menu">
                    <li id="linkmenu">
                        <a href="...">1</a>
                    </li>
                    <li id="linkmenu">
                        <a href="...">2</a>
                    </li>
                    <li id="linkmenu">
                        <a href="...">3</a>
                    </li>


                </ul>
</header_sfondo>

Tutto funziona correttamente, ma SOLO a condizione che io utilizzo il tag "<header_sfondo>" nudo e crudo.

Potrei usare anche <pincopallino> e funzionerebbe uguale, ma smette di funzionare se utilizzo un div (come mi sembrerebbe più corretto fare).

Ad esempio: <div id="header_sfondo">.

In questo caso ovviamente modifico anche il css e lo script, anteponendo ovviamente all'identificativo "header_sfondo" il simbolo "#".

Ho provato anche come classe (div class="header_sfondo") ed utilizzando il punto "." al posto del simbolo "#".
Non funziona nemmeno così.

Potete darmi una mano?
Da cosa dipende il fatto che funzioni solo con un tag individuato dal suo nome e non da un ID o CLASS?

Grazie!

[KillerWorm]

Ciao, non è chiaro in che modo hai adeguato esattamente lo script per poter selezionare l'elemento attraverso un id o una classe.

In JavaScript esistono infatti vari metodi (funzioni) per la selezione degli elementi DOM. E' necessario usare dei metodi specifici a seconda di come intendi selezionare l'elemento. Se l'elemento va selezionato attraverso un id o una classe, di certo non puoi usare getElementsByTagName. Forse il problema è questo.

Nel caso si voglia selezionare l'elemento con id:

<div id="header_sfondo">...</div>

puoi usare uno di questi metodi:

var el = document.getElementById('header_sfondo');
//
var el = document.querySelector('#header_sfondo');

Entrambi selezionano l'elemento con id header_sfondo. Il primo metodo, getElementById, è infatti specifico per selezionare un singolo elemento attraverso l'id, lo dice il nome stesso "get element by id".

Il secondo metodo, querySelector, è sicuramente più versatile perché puoi selezionare un qualsiasi elemento attraverso l'uso di un selettore CSS. Nota infatti che in questo caso va specificato il cancelletto che indica di selezionare l'elemento con quell'id.

Nel caso si voglia selezionare un elemento che possiede una specifica classe:

<div class="header_sfondo">...</div>

puoi usare uno di questi metodi:

var el = document.getElementsByClassName('header_sfondo')[0];
//
var el = document.querySelector('.header_sfondo');

Il primo, getElementsByClassName, restituisce una array-like collection, cioè una lista di elementi che corrispondono a quella classe (quindi non un singolo elemento), per cui puoi accedere al primo (se è stato rilevato qualcosa) attraverso l'indice 0, esattamente come hai fatto per getElementsByTagName.

Il secondo metodo è quello versatile già visto. In questo caso sarà restituito il primo elemento trovato con quella specifica classe secondo quel selettore CSS.

[ivanisevic82]

Wow!

Non solo mi hai fornito una soluzione, ma anche dato una spiegazione più che esauriente, che mi ha fatto comprendere un pò meglio il senso delle modifiche apportate.

Grazie mille di cuore!