sticky css

[emaarga]

Ciao a tutti
avrei bisogno di sapere come si blocca il box a sinistra quando si scorre la pagina in fondo, praticamente non riesco a bloccare il box a destra va sopra al footer:
https://meetandcook.it/?elementor_li...stay-elem-test

da css :
ho inserito nel box


.pricing-table {
position: fixed;
left:65%;
}

Avete una soluzione migliore? e sopratutto bloccare il box a seconda di quanto uno scorre--

Grazie mille

[KillerWorm]

Ciao, nella pagina che hai linkato non riesco a capire a quale box ti stai riferendo.
Anche cercando l'elemento ".pricing-table" nell'analisi pagina non viene rilevato.

Ad ogni modo, se si tratta solo di un problema di sovrapposizione degli elementi, potrebbe essere sufficiente applicare uno z-index impostando un valore elevato:

.pricing-table {
  position: fixed;
   left:65%;
z-index: 9999;
}

Se non si risolve prova a specificare meglio di che elemento stai parlando, verificando che il link postato qui caorrisponda alla pagina in cui è presente quell'elemento. Eventualmente può essere utile vedere uno screenshot in cui si presenta il problema.

[emaarga]

Ciao, nella pagina che hai linkato non riesco a capire a quale box ti stai riferendo.
Anche cercando l'elemento ".pricing-table" nell'analisi pagina non viene rilevato.

Ad ogni modo, se si tratta solo di un problema di sovrapposizione degli elementi, potrebbe essere sufficiente applicare uno z-index impostando un valore elevato:

.pricing-table {
  position: fixed;
   left:65%;
z-index: 9999;
}

Se non si risolve prova a specificare meglio di che elemento stai parlando, verificando che il link postato qui caorrisponda alla pagina in cui è presente quell'elemento. Eventualmente può essere utile vedere uno screenshot in cui si presenta il problema.

Ciao si e il box di destra quello piu grande .....praticamente deve bloccarsi appena arrivo al footer anche se metto lo z index va sopra al footer invece lo devo bloccare

[KillerWorm]

Ho capito ma non vedo quell'elemento sulla pagina.

Specifica meglio come poter riprodurre il problema. Essendo un layout responsive e possibile che a te appaia perché lo stai visualizzando con una determinata dimensione dello schermo.

Verifica inoltre che il link postato punti correttamente alla pagina in questione. Nell'URL vedo che è presente una querystring ma se clicco sul link mi riporta alla pagina principale di quel sito dove l'URL risulta senza alcuna querystring e, ripeto, non riesco a capire a quale "box" ti stai riferendo perché non lo trovo sulla pagina.

E' possibile che quella pagina sia generata da un risultato momentaneo di qualche ricerca che effettui sul sito o che si riferisca a qualche pagina non pubblica a cui accedi con proprietà di amministrazione.

Come già indicato, prova anche a postare uno screenshot per identificare con precisione di che box stai parlando, diversamente è difficile poterti aiutare.

[emaarga]

Ho capito ma non vedo quell'elemento sulla pagina.

Specifica meglio come poter riprodurre il problema. Essendo un layout responsive e possibile che a te appaia perché lo stai visualizzando con una determinata dimensione dello schermo.

Verifica inoltre che il link postato punti correttamente alla pagina in questione. Nell'URL vedo che è presente una querystring ma se clicco sul link mi riporta alla pagina principale di quel sito dove l'URL risulta senza alcuna querystring e, ripeto, non riesco a capire a quale "box" ti stai riferendo perché non lo trovo sulla pagina.

E' possibile che quella pagina sia generata da un risultato momentaneo di qualche ricerca che effettui sul sito o che si riferisca a qualche pagina non pubblica a cui accedi con proprietà di amministrazione.

Come già indicato, prova anche a postare uno screenshot per identificare con precisione di che box stai parlando, diversamente è difficile poterti aiutare.

Scusate ecco i link : https://meetandcook.it/listing/milan...-porta-genova/ ora si dovrebbe vedere praticante il box a destra quando scende si deve bloccare prima che vada sotto al footer

[KillerWorm]

Eccolo

La situazione non è così semplice da risolvere.
Non puoi farlo solo attraverso il CSS.

Ho visto che stai usando WP con Elementor in cui dovrebbero essere già disponibili gli strumenti per applicare l'effetto sticky sugli elementi; però, da quello che vedo, tu lo stai applicando manualmente da CSS. Presumo che tu non sia riuscito a risolvere attraverso le impostazioni disponibili sul pannello di controllo di Elementor.

In tal caso bisognerà intervenire usando un po' di JavaScript/jQuery con cui è possibile impostare l'evento scroll per verificare quando quel box raggiunge il footer e quindi bloccare/sbloccare il suo posizionamento.

Vedi intanto qualche possibile soluzione data su Stack Overflow per richieste simili alla tua:
Stop fixed position at footer
Sticky element - unset when reach scroll reaches footer


[MOD]
nel frattempo sposto in JavaScript

[emaarga]

Eccolo

La situazione non è così semplice da risolvere.
Non puoi farlo solo attraverso il CSS.

Ho visto che stai usando WP con Elementor in cui dovrebbero essere già disponibili gli strumenti per applicare l'effetto sticky sugli elementi; però, da quello che vedo, tu lo stai applicando manualmente da CSS. Presumo che tu non sia riuscito a risolvere attraverso le impostazioni disponibili sul pannello di controllo di Elementor.

In tal caso bisognerà intervenire usando un po' di JavaScript/jQuery con cui è possibile impostare l'evento scroll per verificare quando quel box raggiunge il footer e quindi bloccare/sbloccare il suo posizionamento.

Vedi intanto qualche possibile soluzione data su Stack Overflow per richieste simili alla tua:
Stop fixed position at footer
Sticky element - unset when reach scroll reaches footer


[MOD]
nel frattempo sposto in JavaScript

Grazie mille d'avvero ora vedo di capire come funziona il tutto con java

[KillerWorm]

ora vedo di capire come funziona il tutto con java

Occhio, JavaScript non è Java