Vai al contenuto
BomAle

fissare l'header dopo che viene superato o raggiunto

Recommended Posts

BomAle

non ho una demo da farvi mostrare ma se avete 2 minuti basta:

aggiungere in "includeJS" questo script in fondo:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

e nel globalTemplate preferibilmente in fondo prima di </body>

<script type='text/javascript'>var jQ = jQuery.noConflict();var selettore        = '#header_bar';var selettore_origin    = jQ(selettore).offset().top;// + jQ('#header_bar')[0].offsetHeight;var min_width        = jQ(selettore).css('min-width');var altezza        = jQ(selettore)[0].offsetHeight;var prossimo_selettore    = (jQ(selettore).next()[0]) ? jQ(selettore).next() : jQ(selettore).parent().next();var margin_top_pross    = parseInt(prossimo_selettore.css('margin-top'));jQ(document).ready(function(){jQ(window).scroll(function(){    if(jQ(this).scrollTop() > selettore_origin)    {        if (jQ(selettore).css('position') != 'fixed')        {            jQ(selettore).css({'position': 'fixed','z-index': '9999','top': '0','width': '90%','min-width': '500px','box-shadow': '0 2px 3px rgba(0, 0, 0, 0.18)'});            //jQ(selettore).slideUp( 100 );            //jQ(selettore).slideDown( 100 );            if (prossimo_selettore.css('margin-top') != (margin_top_pross + altezza)+'px')            {                prossimo_selettore.css('margin-top', margin_top_pross + altezza);            }        }    }    else    {        if (jQ(selettore).css('position') == 'fixed' && prossimo_selettore.css('margin-top') == (margin_top_pross + altezza)+'px')        {            prossimo_selettore.css('margin-top', '-='+altezza);        }        jQ(selettore).css({'position': '','width': 'auto', 'min-width': min_width});    }});});</script>

potete poi configurarlo come volete, ma la base è questa ;)

appena posso vi mostro un esempio nella mia board test, funziona perchè l'ho scritto e verificato io stesso :P

jQ('#header_bar')[0].offsetHeight;

questo identifica l'altezza dell'elemento "#header_bar", se aggiunta a header_bar_origin l'header sarà fissato quando sarete andati oltre dal suo campo visivo.

invece se non lo sommate, verrà fissato appena il bordo superiore raggiunge il punto più alto dell'elemento header (consigliato per "l'estetica").

 

opzioni:

togliete parent() se l'header non è l'ultimo elemento della del <div class="ipbwrapper">

sostituire scrollHeight con clientHeight per non avere nessun artefatto grafico, lo consiglio solo se avete interspazi ampi!

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
DenisNaccari

Ho passato tutto il giorno a cercare qualcosa, poi miracolosamente ho visto questo post.

Il mio problema è che non riesco a mettere il Jquery, se lo metto va in contrasto con qualcosa del forum e mi rende inutilizzabili l'editor e funzioni di risposta T_T...

Modificato da Denis Naccari

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
BomAle

si in effetti dovrei usare prototype, però anche io ho un problema con la modifica rapida dei post con jquery.

appena risolvo questo ti faccio sapere.

 

devo anche aggiornare lo script con le ultime modifiche che ho fatto...

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
trattore

e possibile fare questo giochino anche in un header secondario? vorrei che un menu creato da me si bloccase cosi

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
BomAle

si si può... ho aggiornato il codice, ora basta mettere l'id o altro nella variabile "selettore".

 

per header aggiuntivi basta cambiare e ripetere il codice quasi sicuramente...

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
trattore

per fissare il probrema dell editor sotituite

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

con

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script><script>jQuery.noConflict();</script>

ora funziona alla grande... :rolleyes:

Modificato da trattore

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
trattore

BomAle nel tuo sito sulle registrczioni  quando inserisi il campo user o password non ti avverte se e disponibile ecc sul lato destro quella finestrella verde sulla destra, come mai

Modificato da trattore

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti
BomAle

BomAle nel tuo sito sulle registrczioni  quando inserisi il campo user o password non ti avverte se e disponibile ecc sul lato destro quella finestrella verde sulla destra, come mai

credo che prototype vada in conflitto con jquery, non penso di riuscire a risolvere :/

 

RISOLTO, Segui queste istruzioni... http://www.invisionpower.com/support/kb/_/terms-of-use-popup-does-not-show-during-registration-r57

tutta colpa di un errore nei template, andava a guastare anche altre parti del codice :( grazie per la segnalazione :P

Condividi questo messaggio


Link di questo messaggio
Condividi su altri siti

Crea un account o accedi per lasciare un commento

You need to be a member in order to leave a comment

Crea un account

Iscriviti per un nuovo account nella nostra comunità. È facile!

Registra un nuovo account

Accedi

Sei già registrato? Accedi qui.

Accedi Ora

×