WebSite X5Help Center

 
Roberto M.
Roberto M.
User

Integrazione Ombra stiky-bar  it

Author: Roberto M.
Visited 1226, Followers 4, Shared 0  

Salve ragazzi. Ho bisogno di una escamotage per integrare il buon codice di Giuseppe Guida che permette la discesa rallentata e la colorazione della stiky bar. Ho bisogno solamente di aggiungere l'ombra. Ripropongo per intero il codice dell'autore:

<style>
/* credit by Giuseppe Guida */
#imStickyBarGraphics {
transition: 1s!important;
}
#imStickyBarContainer {
transition: 1s!important;
}

#imStickyBarGraphics.myStickyBar {
background: rgba(8, 69, 126, 1) !important;
opacity: 1 !important;
}
#cookie-law-message .imCloseInn {
font-size: 18px !important;
display: inline-block;
padding: 15px 50px !important;
}
</style>

<script>
$(document).scroll(function() {
if ($(this).scrollTop() > 150) {
$('#imStickyBarGraphics').addClass('myStickyBar');
} else {
$('#imStickyBarGraphics').removeClass('myStickyBar');
}
});
</script>

Quì invece il demo che sto preparando

Ringrazio dell'attenzione.

Posted on the
15 ANSWERS - 2 USEFUL
Giancarlo B.
Giancarlo B.
User

Ciao Roberto non so se ho capito la tua esigenza, inserendo la riga di codice in grassetto si aggiunge l'ombra:

(puoi personalizzare anche la grandezza dell'effetto)

<style>
/* credit by Giuseppe Guida */
#imStickyBarGraphics {
transition: 1s!important;
}
#imStickyBarContainer {
transition: 1s!important;
}

#imStickyBarGraphics.myStickyBar {
background: rgba(8, 69, 126, 1) !important;
opacity: 1 !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
#cookie-law-message .imCloseInn {
font-size: 18px !important;
display: inline-block;
padding: 15px 50px !important;
}
</style>

<script>
$(document).scroll(function() {
if ($(this).scrollTop() > 150) {
$('#imStickyBarGraphics').addClass('myStickyBar');
} else {
$('#imStickyBarGraphics').removeClass('myStickyBar');
}
});
</script>

Read more
Posted on the from Giancarlo B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

... ho aspettato che ti rispondessero gli esperti, del programma. ...ma(!), ...se non riesci con le opzioni del programma, ...allora potrai risolvere in semplice EXTRA come già sai, facendo da te e meglio a tua scelta, per esempio da qui:
https://css-tricks.com/snippets/css/css-box-shadow/

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Giancarlo B.
Giancarlo B.
User
 ‪ KolAsim ‪ ‪
... ho aspettato che ti rispondessero gli esperti, del programma. ...ma(!), ...

hahahaha!!! all'ora non ero certo io .... wink

Read more
Posted on the from Giancarlo B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

... urca! surprised ... non ti avevo visto... ciao...wink...

... 

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Roberto M.
Roberto M.
User
Author

Grazie di avermi dato la risposta. Tuttavia ho preferito toglierla la discesa rallenty perchè rallentava un po tutto e ho lasciato solo l'ombra.

Read more
Posted on the from Roberto M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Best User of the month ESBest User of the month PT

... meno effetti, filtri, animazioni, web fonts, eccetera ci sono, e meglio è...

.

Read more
Posted on the from  ‪ KolAsim ‪ ‪
Giancarlo B.
Giancarlo B.
User
Roberto M.
Grazie di avermi dato la risposta. Tuttavia ho preferito toglierla la discesa rallenty perchè rallentava un po tutto e ho lasciato solo l'ombra.

in definitiva tutto quel codice non servirebbe (se effettivamente non vuoi rallentare troppo l'effetto), molto lo fai con le impostazioni di website basta solo il codice dell'ombra, olmeno io faccio così.

Ciao.

Read more
Posted on the from Giancarlo B.
Roberto M.
Roberto M.
User
Author

Esatto Giancarlo. L'effetto in se per stesso è bello (rallenty,discesa e colorazione) ma alla fine gli dai un pò di trasparenza dalle impostazioni e aggiungi 2 righe per l'ombra che mi è sembrato tutto più veloce. In ogni caso sempre grazie...wink

Read more
Posted on the from Roberto M.
Giuseppe Guida
Giuseppe Guida
User

Ciao Roberto, io ho usato quel codice qui ma non mi sembra che lo sfondo che appare gradualmente sotto le voci del menù allo scroll della pagina rallenti il sito:

https://www.giuseppeguida.it/ggwebdesign/

Forse nel tuo caso c'erano altri codici che rallentavano il tutto, non saprei.

Ciao

Read more
Posted on the from Giuseppe Guida
Giancarlo B.
Giancarlo B.
User

nel tuo esempio Giuseppe il comportamento è ok, non è come quello visto sul sito di Roberto... undecided

Read more
Posted on the from Giancarlo B.
Giuseppe Guida
Giuseppe Guida
User
Giancarlo B.
nel tuo esempio Giuseppe il comportamento è ok, non è come quello visto sul sito di Roberto...

Giancarlo, ciao. Non ho avuto modo di testare l'esempio online di Roberto con il codice extra, da quel che ho capito ha lasciato solo l'ombra sotto la sticky bar... Se dici che effettivamente era più lento, evidentemente qualcosa rallentava il tutto ma non credo sia il mio codice per la sticky.

Read more
Posted on the from Giuseppe Guida
Roberto M.
Roberto M.
User
Author

Ciao Giuseppe. La mia intenzione non era certo riferita all'inutilità del codice ci mancherebbe. Tuttavia nel mio caso mi ha dato l'impressione che fosse rallentato ma le cause possono dipendere da 1000 fattori. Ne converrai, come dice kool, che usare meno codice,font ecc... il sito ne giova come in tutte le cose. Ti faccio un esempio: se nella stiky metto il traduttore (non quello orribile di default) ma quello un po' più serio, noto che la stiky è più lenta. Facendo delle prove, tolti gli effetti,i css e qualche riga di codice e un logo per quanto più possibile leggero, si ha più velocità e così dicasi per le immagini,video ecc.. Nel mio caso questo demo, deve avere qualcosa che non quadra e quindi mi ripropongo di vederci meglio "dentro" perchè, come ho già detto, il tuo codice è perfettamente funzionante e,infatti,noto che sul tuo sito va benissimo. Se me lo lasciate aperto il post magari ci ritorno.Devo fare qualche prova.wink

Read more
Posted on the from Roberto M.
Giuseppe Guida
Giuseppe Guida
User

Ciao Roberto, sì, tutto chiaro... L'importante è che tu abbia trovato la soluzione più adatta alle tue esigenze e che non rallenta il sito.

Read more
Posted on the from Giuseppe Guida
Roberto M.
Roberto M.
User
Author

L'ho rimessa. Scorporando il sito e facendo un test sulla home, alleggerito tutto il contorno, la stiky va come deve andare ossia bene! Questo è un demo per un cliente poi una volta acquistato gli ottimizzo l'ambaradam

Read more
Posted on the from Roberto M.