WebSite X5Help Center

 
Roberto M.
Roberto M.
User

Integrazione Ombra stiky-bar  it

Autor: Roberto M.
Visited 1141, Followers 4, Udostępniony 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 ODPOWIEDZI - 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>

Czytaj więcej
Posted on the from 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/

.

Czytaj więcej
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

Czytaj więcej
Posted on the from Giancarlo B.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

... 

Czytaj więcej
Posted on the from  ‪ 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.

Czytaj więcej
Posted on the from Roberto M.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

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

.

Czytaj więcej
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.

Czytaj więcej
Posted on the from 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

Czytaj więcej
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

Czytaj więcej
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

Czytaj więcej
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.

Czytaj więcej
Posted on the from 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

Czytaj więcej
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.

Czytaj więcej
Posted on the from 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

Czytaj więcej
Posted on the from Roberto M.