Assegnare classe CSS dopo un dato scroll verticale

[hitmands]

Salve Ragazzi, sono nuovo del forum, mi chiamo Giuseppe!

Vorrei assegnare, tramite javascript, la classe .fixed (che conterrebbe position fixed) a un div (menu) dopo lo scroll vertical di, poniamo, 800px...

di seguito un esempio http://blog.yjl.im/2010/01/stick-div...scrolling.html peccato che qui usi jQuery che a me da conflitti con altre librerie, vorrei usare una soluzione javascript native...

Che si fa...

[Nobody33]

1) La posizione fissa (.fixed) è una cosa, il fatto che di inizia a scrollare dopo 800px è un altra cosa. A te la scelta...

Se hai conflitti con altre librerie (quale?) puoi usare

<script type="text/javascript"> 
$.noConflict(); 
// Codice di altra libreria qui 
</script>

Altrimenti prova di sostituire il $ con jQuery:

jQuery("#elemento").blabla();

invece di

$("#elemento").blabla();

Hai provato una delle due soluzioni?

[hitmands]

Ciao, grazie per la risposta "al volo"...
però ho già provato con soluzioni noConflict, il punto è che ho interferenza fra librerie (oltre a quelle date da $ che è usato anche da moot...).

Dici che una soluzione in javascript nativo non si può trovare?

// Aggiungo:

cerco di spiegare meglio l'esempio, abbiamo un div largo 100% e alto 50px. Ha un posizionamento assoluto e si trova in altezza a 800px di distanza dal bordo superiore della finestra. Con lo scroll della pagina, a una ipotetica posizione top:0, javascript dovrebbe assegnare la classe fixed (che io stilerei nei css con position:fixed). Tutto questo per evitare che il div esca dal viewport.

Devo ammettere che non sono un granché a spiegare le cose



GiuseppeAggiungo:

[Nobody33]

Tutto si può fare e tutto si trova.

Ma

1) vuoi che il menu abbia la posizione .fixed

2) oppure che inizia a scrollare dopo 800 px?

Poi, dipende sempre cos'è che è in conflitto. Magari si sistema, il ché sarebbe forse (non so) più semplice.

EDIT

Credo che tu vuoi il punto 2. giusto ?

[Nobody33]

QUI

[hitmands]

Ciao, no no, ecco cosa voglio ottenere http://blog.yjl.im/2010/01/stick-div...scrolling.html (vedi il link?)

io voglio che a un determinato scroll (in termini di pixel) della pagina, si aggiunga una classe a un <div style="position:absolute;"> e che, quindi, diventi <div style="position:fixed;">.

In pratica, fino a che non esce fuori dal viewport, il div può scrollare... non appena sta per uscire deve bloccarsi... un altro esempio lo trovi qui http://www.vanderamsterdam.com/ (link) mi riferisco al menu di navigazione!

(p.s. i conflitti immagino sia dati dall'uso di più file jQuery, magari di versioni diverse, boh... in realtà non lo so).
Giuseppe!

[Nobody33]

Avevo capito cosa vuoi ottenere. Il link da me mandato ---> credo sia abbastanza semplice da adattare, ma non ho visto ne il codice del link mandato (è una delle prime cose spuntate in una ricerca google), ne la tua pagina, quindi non ti so dire altro.


Di librerie jQuery si tiene sempre una libreria jQuery (basta ed avanza ) per sito.

Non mi è mai capitato che più script jQuery mi vadano in conflitto ( a parte se i nomi sono uguali); fino ad una decina vai tranquillo.
E se ci dovessero essere dei conflitti, spesso basta che si cambi la posizione degli script, si cambi il nome della funzione, ecc. e tutto va per il meglio.
Ovviamente il margine di conflitto può capitare, ma è minimo.

[hitmands]

Comunque, il tuo esempio non saprei proprio come adattarlo, anche perché esso tiene sempre alla data distanza il div.
A me serve fare come nel link che t'ho mandato... se dovessi risolvere i conflitti con una sola libreria, userò jQuery!
Tanke!

[Nobody33]

1) "Tanke" si scrive con la D

2) Se vai su QUESTA pagina e dai una rapida occhiata al loro codice, trovi:

window.onscroll = function () {
    if (!docked && (menu.offsetTop - scrollTop() < 0)) {
        menu.style.top = 0;
        menu.style.position = 'fixed'; 
        menu.className = 'docked'; 
        docked = true;
    } else if (docked && scrollTop() <= init) { 
        menu.style.position = 'absolute'; 
        menu.style.top = init + 'px';
        menu.className = menu.className.replace('docked', ''); 
        docked = false;  
    }
};

A) Legano l'"onscroll" alla finestra.
B) Il "docked" è impostato su "true" quando il menu è bloccato in cima alla pagina e
contemporaneamente il menu è impostato su "fixed".
C) Il resto è sostanzialmente un po di logica del controllo della posizione.

Se vuoi, ti salvi la pagina e li "rubi" il codice

[hitmands]

Originariamente inviato da Nobody33
1) "Tanke" si scrive con la D

2) Se vai su QUESTA pagina e dai una rapida occhiata al loro codice, trovi:

window.onscroll = function () {
    if (!docked && (menu.offsetTop - scrollTop() < 0)) {
        menu.style.top = 0;
        menu.style.position = 'fixed'; 
        menu.className = 'docked'; 
        docked = true;
    } else if (docked && scrollTop() <= init) { 
        menu.style.position = 'absolute'; 
        menu.style.top = init + 'px';
        menu.className = menu.className.replace('docked', ''); 
        docked = false;  
    }
};

A) Legano l'"onscroll" alla finestra.
B) Il "docked" è impostato su "true" quando il menu è bloccato in cima alla pagina e
contemporaneamente il menu è impostato su "fixed".
C) Il resto è sostanzialmente un po di logica del controllo della posizione.

Se vuoi, ti salvi la pagina e li "rubi" il codice