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!

Link to post
Share on other sites

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

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

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

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