WebSite X5Help Center

 
Roberto M.
Roberto M.
User

Integrazione Ombra stiky-bar  it

Autore: Roberto M.
Visite 831, Followers 4, Condiviso 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.

Postato il
15 RISPOSTE - 2 UTILI
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>

Leggi di più
Postato il da 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/

.

Leggi di più
Postato il da  ‪ 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

Leggi di più
Postato il da Giancarlo B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

... 

Leggi di più
Postato il da  ‪ KolAsim ‪ ‪
Roberto M.
Roberto M.
User
Autore

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

Leggi di più
Postato il da Roberto M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

.

Leggi di più
Postato il da  ‪ 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.

Leggi di più
Postato il da Giancarlo B.
Roberto M.
Roberto M.
User
Autore

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

Leggi di più
Postato il da 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

Leggi di più
Postato il da Giuseppe Guida
Giancarlo B.
Giancarlo B.
User

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

Leggi di più
Postato il da 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.

Leggi di più
Postato il da Giuseppe Guida
Roberto M.
Roberto M.
User
Autore

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

Leggi di più
Postato il da 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.

Leggi di più
Postato il da Giuseppe Guida
Roberto M.
Roberto M.
User
Autore

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

Leggi di più
Postato il da Roberto M.