fissare l'header dopo che viene superato o raggiunto

[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

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!

[najaru]

non ho capito cosa fa

[BomAle]

http://v8.tinypic.com/player.swf?file=15f5cli&s=8

[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 21 Aprile 2014 da Denis Naccari

[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...

[trattore]

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

[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...

[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...

Modificato 26 Aprile 2014 da trattore

[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 3 Maggio 2014 da trattore

[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