Oggetto come Sticky 
Autore: Fabrizio Ciccarelli
Visite 467,
Followers 2,
Condiviso 0
Buonasera, sto apportando delle modifiche a questa pagina: https://www.cafonline.it/servizi.php
e la barra che ora è pubblicata l'ho modificata così:
Poi nella sezione "effetti" ho aggiunto "Fade In" con Lazy Loading abilitato e nella scheda "Posizione" ho abilitato l'oggetto come "sticky" con dimensione dall'alto 10 ma non si muove niente. Ho provato anche con 0 ma non succede niente. Cosa ho sbagliato?
Postato il
Ciao fabri. Noi abbiamo da poco rilasciato un sito ad un caf. Per evitare un sovraffollamento tra icone immagini e quant'altro e per rendere meno incasinata la situazione abbiamo utilizzato il portfolio al posto della barra direzionando i servizi tutti alla pagina contatti tramite Mailto senza tante spiegazioni sulle materie ma prevedendo solo una pagina AVVISI che sono direttamente personalizzabili dal nostro cliente cosi come tutti i testi del sito. Nel tuo caso io non capisco a cosa ti riferisci quando dici ma non si muove niente". Sarà l'età
Autore
Mi mandi il link del sito?
… il menu supplementare per gli ancoraggi adesso è trasparente e sotto agli altri oggetti.
… con la mia invenzione esclusiva basata sul mio div_custom fluttuante e rimanendo così le cose come stanno adesso online, a cose già fatte, con un solo click si otterrebbe come da STAMP simulato…
…!... se ti interessa procedere per tale modo, ... avvisami, e nel caso ritornerò in giornata:
.
ciao
.
Autore
I tuoi codici sono provvidenziali anche se non capisco perché la funzione di website non funziona.
Se non c'è altra soluzione preferisco andare di codice. Ho già impostato i colori i colori della barra si tratterebbe solo di lasciarlo visibile durante lo scroll.
... OK ... adesso è trasparente e va sotto le schede...
... se non tocchi niente, ...dami il tempo di valutare per addomesticare ad hoc il mio codice sul tuo layout...
.
Autore
È in lavorazione quindi al momento non fare niente per favore. Entro la settimana prossima, credo che avremo la versione definitiva.
Ti scrivo appena possibile...
Intanto grazie...
... intanto mi ero già avviato e valutato, ...fa niente, non ti preoccupare, nel caso mi farai sapere...
... se la struttura rimane la stessa precedente, e se non fai modifiche importanti, la mia invenzione si basa sul rilevamento e posizionamento dinamico del menu supplementare, oltre che rilevarne l'altezza dinamicamente...
... l'ho fatto in modo che se vuoi puoi personalizzare facilmente il selettore di riferimento (attualmente "#imCell_112"), e puoi anche personalizzare facilmente l'offset per le Ancore ed il colore di sfondo, senza perderti nel codice...
.
... quando e se sarà ci risentiremo...
.
Buongiorno Fabrizio,
l'effetto Sticky applicato agli oggetti fa sì che questi rimangano visibili finché anche gli altri oggetti nella stessa riga lo sono, ad esempio nel caso di testi molto lunghi accanto a cui ci sono immagini o altro che si vuole mantenere visibili.
L'oggetto Testo in questione non ha però altri oggetti nella stessa riga.
Autore
Eric quindi per fare in modo che questo "sotto menù" che ho creato resti visibile durante lo scroll, cosa dovrei fare?
Codice extra.
HTML + JavaScript e risolvi
Grazie Eric, ... da parte mia...
Ho voluto fare anch’io una verifica nel contesto dell’argomento di questo topic...
...Per farla breve: con circa 60 click, una decina di minuti al massimo e 5 secondi per l’esportazione, più che altro per mio sfizio personale (da cui poi mi sono venute anche altre idee!) ho provato a mettere insieme questo semplice esempio basilare:
>> Barra menu supplementare con posizione fissa (Sticky), utilizzando direttamente l’opzione già disponibile.
... Il tutto senza codici extra (a parte una mia piccola “invenzione” di cortesia, in realtà del tutto superflua)...
... Se si hanno le idee chiare e si parte col piede giusto fin dall’inizio ((*)), sfruttando bene quel piccolo quid+, secondo me si possono ottenere ottimi risultati...
((*)) ... Diverso invece il discorso quando il lavoro è già stato fatto, come nel caso di cui stiamo parlando. In quel caso, probabilmente la soluzione più rapida, semplice e indolore resta quella della mia “invenzione” con codice extra che avevo accennato prima: permette di ottenere lo stesso risultato senza dover mettere mano alla struttura del progetto...
... Ripeto: quando ormai il lavoro è già stato fatto...
... In pratica si tratta magari di qualche ora di lavoro, ma comunque con l’obiettivo di arrivare allo stesso risultato,sempre, ovviamente, avendo le idee ben chiare...
ciao. ed ancora grazie.
.
Ma forse basta un semplice CSS, vedi qui l'esempio che ho ricreato io:
https://www.bozzasito001.altervista.org/oggettosticky
vedi cosa succede quando arrivi alla barra che contiene le tue stesse diciture (CAF - PATRONATO - SOSTEGNO REDDITO ecc.)
Un semplice CSS che nel mio caso è questo:
<style>
#imCell_7{
position: sticky;
top: 20px;
z-index: 1000 !important;
}
</style>
tu dovresti solo inserire il corretto ID relativo alla tua cella, al massimo dovrai cambiare anche il valore di top in base alle tue esigenze
P.S. sempre se ho capito bene ed era quello che volevi ottenere.
Ciao
P.S.S. facemndo altre prove con codice JS ho aggiunto un cambio colore del background dell'oggetto quando diventa sticky
Autore
E' simpatico. Complimenti!
Come faccio ad integrarlo nella pagina?
Ciao Fabrizio. Per il codice semplice dell'oggetto sticky (senza cammbio colore), prendi il mio primo codice CSS inserito sopra, sostituisci #imCell_7 con l'ID della tua cella che, se il link è quello che hai postato in precedenza, è questo: #imCell_112
Il codice che dovrebbe funzionare per te diventa:
<style>
#imCell_112{
position: sticky;
top: 20px;
z-index: 1000 !important;
}
</style>
Lo inserisci nelle Proprietà/esperto della pagina Servizi prima della chiusura del Tag HEAD
Ciao
P.S. ti consiglio di inserire un colore di sfondo (bianco va bene) selezionando al PASSO 4 Pagine l'Oggetto che devi far diventare sticky e assegnando il colore di sfondo tramite lo Stile della Cella. In questo modo, allo scroll, quando l'oggetto diventa sticky, avendo un suo sfondo, i testi al suo interno non creano confusione con gli altri testi presenti nella pagina
x Fabrizio, ... è dal primo primo giorno che te lo avevo già detto (ma c'è anche di più) ...
... 
... il tuo selettore te lo avevo già indicato prima ...
-
.
SE VUOI L'EFFETTO DI CAMBIO COLORE allo scroll, quando l'oggetto diventa sticky, devi usare del cosice JS, e il CSS di prima diventa così nel tuo caso, va sempre inserito come descritto sopra:
<style>
/* Contenitore sticky */
#imCell_112{
position: sticky;
top: 20px;
z-index: 1000 !important;
}
/* Effetto transizione su background */
#imCellStyleGraphics_112{
transition: background-color 1s ease;
}
/* Quando la cella diventa sticky */
#imCell_7.is-sticky #imCellStyleGraphics_112{
background-color: #e8f5e9; /* verde molto chiaro */
}
</style>
MENTRE COME JS, da inserire sempre in Proprietà della pagina ma PRIMA DELLA CHIUSURA DEL TAG BODY, inserisci questo:
<script>
window.addEventListener("load", function(){
var cell = document.getElementById("imCell_112");
var stickyTop = 20;
function checkSticky(){
var rect = cell.getBoundingClientRect();
if(rect.top <= stickyTop){
cell.classList.add("is-sticky");
}else{
cell.classList.remove("is-sticky");
}
}
window.addEventListener("scroll", checkSticky);
checkSticky();
});
</script>
A volte certe invenzioni di codice non sono poi così esclusive come vengono raccontate. C’è chi si ostina a presentare ogni riga come una rivelazione, mentre il resto del mondo ha già trovato soluzioni più moderne, leggere e soprattutto più intelligenti.
Bravo Giuseppe Guida!!
Grazie Roberto
Autore
Grazie Giuseppe...
Ho inserito il codice che mi hai dato e devo dire che è come me l'aspettavo tranne il fatto che lo sfondo del sottomenù è trasparente. Come posso fare per rendendolo completamente sovrapposto?
Rileggi i miei messaggi: devi settare uno sfondo bianco nello Stile della cella/oggetto al Passo 4 Pagine...
Era spiegato qui in questo mio precedente messaggio
Autore
Ce l'ho fatta. Grazie 1000!!!