Finora abbiamo assemblato tutti i pezzi della nostra pagina, quello che ci resta da fare adesso e collegarli tra di loro.

Abbiamo utilizzato più volte Len Kort, quindi il CAG ha però senza valorizzare il suo A.

Karev in adesso proveremo a collegare le varie posizioni della pagina tra di loro per fare degli indiretti alle varie sezioni in ll attributo a Karev Puo'.

Quindi non solo ospitare dei TRL completi e ha quindi dei link, altre pagine, altri siti o altre pagine dello stesso sito, quindi della srl relativi, ma può anche linkare, ha delle parti, ha delle sezioni specifiche della pagina.

Vediamo come cominciamo a linkare il menu principale, quindi le sezioni Works e con Tax.

Torno sul mio Mark e identifico il menu che ho creato in precedenza.

Abbiamo detto che HR in questo momento non è valorizzato.

Il modo per settare delle posizioni in pagina ci è consentito utilizzando un attributo ID.

Faccio un esempio la sezione WORKS a cui vorremmo linkare questo questo white di menù potrò attaccarla con un attributo PD a cui darò una chiave.

In questo caso potrebbe essere anche works.

In questo modo ho definito sto provando a definire una posizione a cui vorrei poi linkare la mia ancora torno All'interno Dell'attributo a Karev, dell'elemento di menu' e specifiche rough.

Appunto questa chiave all'interno della Karev.

Quindi works preceduto da Il cancelletto Salvo vediamo l'effetto che ha sulla nostra pagina ricarico e adesso cliccando su Works ho un jump diretto al un già diretto alla sezione che ho appena taggato.

Quindi abbiamo visto come è possibile utilizzando la attributed definire delle posizioni a cui vorrei saltare fare effettivamente dei jump tramite i link che definisco in pagina.

Ok molto rapidamente cominciamo a popolare e tutti gli altri link della pagina Andiamo su con tax seleziono la sezione che mi interessa e darò anche li' uniti e dopo valorizza il mio link.

Facciamo una prova, ricarichiamo la pagina ed ecco che anche questo jump funziona.

Non ci resta che fare la stessa cosa con il menu degli elementi di portfolio.

Ho appena popolato tutti i link della mia pagina e tutte le sezioni sono elencate tra di loro.

Quindi adesso potrò anche cliccare sul menu dei dei miei elementi di portfolio e dei miei lavori e potro' saltare dritto una posizione.

Ok onestamente è un po' scomodo, perché ogni volta che clicco su un su night del mio portfolio.

Il menù ovviamente scrolla in alto e sparisce.

Sarebbe molto bello se potessi mantenerlo sempre fisso nella sua posizione o comunque in alto in maniera tale che possa sempre raggiungerlo.

Effettivamente c' è un modo abbiamo visto come possiamo alterare negli elementi la loro position e in questo caso un position.

Un valore dell'attributo position che ci farebbe molto comodo.

Potrebbe essere sticky tramite sticky possiamo definire un comportamento di ancoraggio per cui l'elemento quando cercherà tramite lo scrollo di uscire dal Wu dal newport.

In realtà resterà ancorato a una posizione ben ben precisa di cui definiremo le coordinate.

Quindi quello che andremo a fare adesso è targhe targhette hazare il il section del menu' dei lavori e assegnare appunto un position sticky apriamo la console di sviluppo, mi identifico il mio elemento.

Abbiamo detto che la section works manju perfetto.

Quindi torno sul mio foglio di stile e cerco appunto dov'era works man you.

Ok, non avevamo definito un selettore per works medio, quindi è il caso di definirne una adesso.

Works è come stavamo dicendo assegnava un position stick.

Abbiamo detto che dobbiamo specificare anche delle coordinate quando assegniamo un position stick, proviamo con un top zero e vediamo come si comporta.

Salviamo ricarichiamo.

Ok, in teoria adesso, scrollando la pagina quando raggiungero' il menu dei lavori, questo resterà ancorato.

Ecco che va forse la posizione, ma un attimo aggiustata di qualche pixel pero' direi che che ci siamo, proviamo a dare un top meno dieci pixel.

Andiamo a vedere.

Ok, meno quindici pixel.

Credo che sia una distanza giusta tra il menu principale è il nuovo menu che abbiamo creato.

Perfetto.

In questo modo tutte le voci restano visibili anche quando ho già scrollato e sono arrivato sul nuovo elemento del portfolio C'.

È ancora qualcosa però che non mi convince adesso le voci del portfolio sono cliccabili.

Ok, ma non sono piu' cliccabili le voci del menù principale.

Questo perché andiamo a ispezionare cosa? La situazione che si è venuta a creare a livello di Dom è il menu dei lavori è sovrapposto al menù del Ledger in quanto adesso a hanno entrambi un position settato Lehder Sticky e quindi è ancorato a delle coordinate in maniera relativa all'interno Newport, mentre invece lo Sticky anche esso è ancorato al Newport con delle sue coordinate.

E diciamo che adesso i due elementi si stanno sovrapponendo è cosa possiamo fare? Potremmo assegnare in questo caso per cercare di ristabilire un po' all' ordine potremmo manipolare la proprietà z index del menu principale, per esempio per cercare di riportarlo di nuovo in avanti rispetto alla section del menù lavori che in questo momento, col suo col suo box con con i suoi padding sta coprendo il menu principale.

Quindi adesso torniamo sul css e alla section del leder proviamo a manipolare appunto lo z index eh okay individuata la section direi che per fare una prova una zeta index di cinque potrebbe andare, quindi lo porta avanti nello stack degli elementi con un valore di cinque, quindi da un peso maggiore dovrebbe diciamo tornare in primo piano rispetto allo z index di default del menù che rappresenta i lavori.

Quindi adesso ricarico la pagina e scrollando che i menu lavori sia ancora correttamente e la è il menu principale continua ad essere tornato ad essere cliccabile bene, cioè ancora qualcosa che non mi convince però è qui mi sa che servirà applicare un hack nel senso che ok, abbiamo adesso le ancore che puntano alle posizioni esatte dei nostri elementi, però avendo messo adesso in positions tiki il nostro menù, abbiamo adesso un altro aggiustamento da fare.

Vediamo come avendo adesso ancorato, anche il menu di navigazione del portfolio è in alto.

Si è venuto a creare un'altezza nella parte alta della pagina considerevole.

Questo quindi si sovrappone alle sezioni che sto scrollando le sezioni che sto raggiungendo vediamo come c' è appunto questo overlap dei nostri menu rispetto alla al contenuto della pagina si dovrebbe leggermente tr traslare la pagina un po' più in basso qua potremmo farlo con un piccolo huck che applichiamo al momento.

Questa che consiste nel assegnare lidi delle mie posizioni, quindi delle mie sezioni che ho targetti zato adesso come posizioni a cui agganciare le ancore like consiste nel creare un nuovo elemento all'interno della sezione che abbiamo targetti usato come come link per per la mia ancora e creerò un altro elemento.

In questo caso potrebbe andar bene una nuova e ancor a cui però non definire o ma semplicemente spostero' liddy che ho assegnato prima la section a questa ancora a cui però darò una classe ben precisa con cui potrò definire un osso seth per cercare di spostare più in basso questa posizione che sto targetti usando, quindi è visivamente cosa faccio? Imposto una classe e la chiamo en corse.

Aggiungerò al mio css il selettore e questo elemento tecnicamente non sarà mai visibile all'utente, ma sarà un elemento che segnerà solo una posizione.

Quindi la prima cosa che sara che faro' sarà aggiungere un visibility aiden che mi consentirà di nascondere questo elemento é un position relative composition relative.

Quindi cambiando il posizionamento da default relative da statica relative, posso adesso assegnare al mio alla mia ancora posso segnare anche gli attributi top bottom left right.

In questo caso mi appoggerò alla tributo top e cosa faro' quindi cerchero' di assegnargli un asset in pixel, quindi cercherò di dargli un po' di spazio in pixel che possa essere necessario a spostare più in basso è come dire il mio punto di ancoraggio, quindi prova a giocarci un po' provo a mettere un cinquanta pixel un meno cinquanta pixel, quindi cercherò di dare un top negativo è di cinquanta pixel che possa spingere più in alto il mio punto di ancoraggio e dare un po' di ossa e un po' di spazio tra quello che è la parte del ledger e il contenuto su cui effettivamente ho scrollato.

Vediamolo meglio.

In pratica sarà tutto più chiaro.

Salvo ricarica la pagina, ovviamente partendo da zero.

Ok, ho trovato la mia ancora proviamo a giocare con questo valore top invece di meno cinquanta.

Proviamo proviamo almeno centocinquanta pixel.

Giochiamo giusto dalla console per trovare un po' il valore che può essere quello più adatto.

Elenchiamo proviamo di nuovo a cliccare sul link ok forse ci siamo l'abbiamo trovato vedete come adesso andando a ispezionare posso anche capire meglio quello che è il senso di questo hack.

Io ho creato un elemento invisibile all'interno della mia pagina che contrassegna era la posizione a cui voglio ancorare, quindi ho tolto la ancora Ho tolto il riferimento alla all'ancora all'ancoraggio di pagina dalla section e l'ho spostato su un elemento invisibile con un posizionamento ben preciso che possa consentirmi di gestire un asset iniziale e in questo caso sono riuscito quindi a evitare che il contenuto si resti sovrapposto.

Resti dietro ai miei due menù fissati in alto.

Adesso applicherò la stessa modifica quindi a tutti gli altri link di pagina e in questo modo avro' una navigazione più fruibile e meno confusionaria