DIV che appare a fine contenuto

[macrunner]

Ciao a tutti


premetto che non so programmare in javacsript ma me la cavicchio con html e css...

ho una pagina html con un contenuto centrale, testi, immagini e così via.


a sinistra del contenuto ho piazzato un div che contiene un piccolo box e un contenuto testo.


La mia necessità è che questo div non sia subito visibile ma deve apparire verso la fine del contenuto, in un determinato punto che non corrisponde all




Per spiegarmi meglio, qualcosa di molto simile a Medium: https://medium.com/refraction-tech-e...y-3a40c9be254b




Come ho risolto al momento:

la classe css del div è "boxcontent"
quindi ho:

<div class="boxcontent">...contenuto...</div>

il css:

.boxcontent {
	float: left;
	margin-left: -70px;
	position: fixed;
	opacity: 0;
}


.boxcontent.boxcontent-showhide {
	opacity: 1;
}

script js:

(function($) {
	document.documentElement.className = "js";
	$(window).scroll( function() {
		if ( $(document).scrollTop() > 300 ) {			
			$(".boxcontent").addClass("boxcontent-showhide");
			
		} else {
			$(".boxcontent").removeClass("boxcontent-showhide");
		}


	});
})(jQuery);

In fase iniziale il div boxcontent è invisibile (opacity 0),
allo scrolling della pagina, 300px, viene aggiunta la classe "boxcontent-showhide"
e il div appare.


Già così funziona bene ma mi sono accorto che il div non dovrebbe apparire a 500px ma al termine dell'articolo che può trovarsi in una posizione che dipende dalla sua lunghezza.
Per esempio se ho un articolo di sole 3 righe il div non apparirà mai.... e se ho un articolo molto lungo il div apparirà prima che sia alla fine.


Dovrei quindi "intercettare" non dalla posizione top ma dalla fine del contenuto, ma non ho davvero idea di come fare.

Grazie per qualsiasi aiuto o suggerimento.

[macrunner]

chiedo scusa ho pasticciato un po' e non posso modificare, manca una parte..
ho scritto 500px ma è 300px

Sempre riguardo al div che appare a fine contenuto, in modo simile a Medium, come posso impostarlo a opacity 0 quando il div si sovrappone ad esempio a un'immagine, video e così via (più larga del contenuto testo)? Poi oltrepassata l'immagine, riappare il div.

Immagino che dovrei aggiungere un ID sull'immagine, ma anche qui non ho idea di come gestirlo con javascript..

[stoneweb]

Invece di 300px potresti usare "altezza del contenitore articolo" - "altezza del div nascosto"
Cioè se hai un articolo in un div alto 900px e il tuo div a comparsa è alto 200px quando si scorre a 700px dall'alto il div compare.

Per renderlo invisibile quando si sovrappone alle immagini, che io sappia, non c'è un metodo semplice. Devi prendere ogni immagine e calcolare a che altezza si trova e a quell'altezza far scomparire o ricomparire il div (sempre se ho capito bene la tua richiesta)

[macrunner]

Invece di 300px potresti usare "altezza del contenitore articolo" - "altezza del div nascosto"
Cioè se hai un articolo in un div alto 900px e il tuo div a comparsa è alto 200px quando si scorre a 700px dall'alto il div compare.

Immaginavo quello che hai detto intercettare la dimensione dell'altezza del contenuto ma è questo che non so come come fare

Per renderlo invisibile quando si sovrappone alle immagini, che io sappia, non c'è un metodo semplice. Devi prendere ogni immagine e calcolare a che altezza si trova e a quell'altezza far scomparire o ricomparire il div (sempre se ho capito bene la tua richiesta)

Qui ho risolto in questo modo, lo sfondo della pagina è bianco, nel div ho creato uno sfondo bianco leggermente trasparente così quando si sovrappone a un'immagine si vede bene lo stesso ed è abbastanza accettabile visivamente.

[stoneweb]

Supponendo che il contenuto principale si trovi in un div .container potresti fare così:

$(document).scrollTop() > ( $('.container').height() - $('.boxcontent').height() )

[macrunner]

Ho provato a inserirlo così com'è cambiando la classe container con la classe single-post ma in inspector non vedo l'aggiunta della classe boxcontent
Non ho capito se questo codice dovrebbe funzionare già di suo o forse devo inserirlo nel mio script js...