Jump to content

fissare l'header dopo che viene superato o raggiunto


BomAle

Recommended Posts

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!

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

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

Link to post
Share on other sites
trattore

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

Link to post
Share on other sites

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

  • Like 1
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
  • Like 1
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
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

Link to post
Share on other sites

Create an account or sign in to comment

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

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. to insert a cookie message.