WebSite X5Help Center

 
Roberto M.
Roberto M.
User

Integrazione Ombra stiky-bar  it

Autor: Roberto M.
Visitado 1192, Followers 4, Compartido 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.

Publicado en
15 RESPUESTAS - 2 úTIL
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>

Leer más
Publicado en de Giancarlo B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

.

Leer más
Publicado en 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

Leer más
Publicado en de Giancarlo B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

... 

Leer más
Publicado en de  ‪ KolAsim ‪ ‪
Roberto M.
Roberto M.
User
Autor

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

Leer más
Publicado en de Roberto M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

.

Leer más
Publicado en 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.

Leer más
Publicado en de Giancarlo B.
Roberto M.
Roberto M.
User
Autor

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

Leer más
Publicado en 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

Leer más
Publicado en de Giuseppe Guida
Giancarlo B.
Giancarlo B.
User

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

Leer más
Publicado en 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.

Leer más
Publicado en de Giuseppe Guida
Roberto M.
Roberto M.
User
Autor

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

Leer más
Publicado en 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.

Leer más
Publicado en de Giuseppe Guida
Roberto M.
Roberto M.
User
Autor

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

Leer más
Publicado en de Roberto M.