Scroll con SmoothScroll errore di posizionamento al primo click

[AltF4]

Buongiorno a tutti, non so se scrivo nella sezione corretta o se devo spostare la domanda nella sezione CSS, ma ho un problema con lo scroll di un sito utilizzando lo script SmoothScroll.

In pratica quando clicco la prima volta su un link la pagina va oltre il bordo superiore, se ci clicco una seconda volta si posiziona correttamente.

Credevo potesse essere un problema di versione JQuery, ma provando sia con la 1.7.1 che con la 1.9.0 fa la stessa cosa.

Ho creato un demo per far capire meglio il problema:
http://demoaltf4.altervista.org/testscroll/

Non riesco a venirne a capo

Grazie in anticipo!

[KillerWorm]

Ciao, da quello che vedo, è semplicemente un problema della logica di funzionamento.

Cerco di spiegarti brevemente.

La barra nera (coi link) passa dal position static (di default) a quello fixed durante lo scorrimento, cioè non appena si scorre oltre il primo box.

Col position static, questo elemento occupa un determinato spazio nel flusso dei contenuti, cioè ha una sua altezza specifica che influisce sul resto dei contenuti. Nel momento in cui questo passa a fixed, viene tolto dal flusso dei contenuti, causando un collasso del suo spazio precedentemente occupato. Per tale motivo, i contenuti che vengono dopo la barra nera (cioe dal box 2 in poi) vanno a riposizionarsi (durante lo scorrimento) per occupare lo spazio dove non c'è più la barra. In sostanza si spostano in alto dell'altezza esatta della barra creando un'incongruenza nel calcolo del punto finale dello scorrimento (diciamo così) e causando quindi il problema che noti.

Chiaramente, una volta che la barra ha preso il position fixed, il problema non si nota più perché la barra non influisce più sul flusso dei contenuti ed il calcolo dello scorrimento non subisce alterazioni.

Potresti risolvere semplicemente impostando sulla barra, in principio, un position absolute che, come il fixed, slega l'elemento dal flusso dei contenuti. Per cui, passando da absolute a fixed, il problema non ci sarà più.

In pratica:
Apri il tuo style.css. Alla riga 19 trovi #barraMenu, dove dovrai aggiungere la regola position: absolute;
Nel selettore che viene dopo, .fixBarraMenu (alla riga 25) ,aggiungi anche l'id dell'elemento (cioè #barraMenu.fixBarraMenu), in modo da avere priorità rispetto all'altro.

Dovresti risolvere. Facci sapere.

[AltF4]

Ti ringrazio innanzitutto per la risposta, ho provato che da te consigliato, ma la barra del menu si comporta correttamente solo per la prima pagina, per le altre la barra del menu scompare del tutto. In pratica non resta "fixed", ma scrolla con tutto il resto.

[KillerWorm]

Prego. Non vedo le modifiche sulla demo, per cui non posso verificare ciò che dici. Quello che ti ho indicato risolve il problema. Evidentemente hai sbagliato qualcosa.

[AltF4]

KillerWorm, tu non hai ragione, hai RAGIONISSIMA!!!



Avevo scritto nel CSS .barraMenu.fixBarraMenu invece di #barraMenu.fixBarraMenu

Ti ringrazio tantissimo, problema risolto e senza il tuo aiuto sarei stato ancora a sbatterci la testa su!