Jump to content
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!

Share this post


Link to post
Share on other sites
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...

Edited by Denis Naccari

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites
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:

Edited by trattore

Share this post


Link to post
Share on other sites
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

Edited by trattore

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Crea Nuovo...

Important Information

By using this site, you agree to our Terms of Use.