WebSite X5Help Center

 
Roberto M.
Roberto M.
User

Integrazione Ombra stiky-bar  it

Auteur : Roberto M.
Visité 1229, Followers 4, Partagé 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.

Posté le
15 RéPONSES - 2 UTILE
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>

Lire plus
Posté le de Giancarlo B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois 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/

.

Lire plus
Posté le de  ‪ 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

Lire plus
Posté le de Giancarlo B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

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

... 

Lire plus
Posté le de  ‪ KolAsim ‪ ‪
Roberto M.
Roberto M.
User
Auteur

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

Lire plus
Posté le de Roberto M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Meilleur utilisateur du mois ESMeilleur utilisateur du mois PT

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

.

Lire plus
Posté le de  ‪ 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.

Lire plus
Posté le de Giancarlo B.
Roberto M.
Roberto M.
User
Auteur

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

Lire plus
Posté le de 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

Lire plus
Posté le de Giuseppe Guida
Giancarlo B.
Giancarlo B.
User

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

Lire plus
Posté le de 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.

Lire plus
Posté le de Giuseppe Guida
Roberto M.
Roberto M.
User
Auteur

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

Lire plus
Posté le de 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.

Lire plus
Posté le de Giuseppe Guida
Roberto M.
Roberto M.
User
Auteur

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

Lire plus
Posté le de Roberto M.