Riprendo questa mia recente discussione poiché descrive la situazione, oltre a esserne il naturale (spero!) sviluppo; non mi sembrava il caso di aprirne un'altra per discutere della medesima funzione JS.
Sono riuscito a unificare in una sola le due funzioni che gestivano un div contenente dei link interni alla pagina web.
Tale div "destrotag", in visualizzazione pc, è posizionato a destra del div principale, e scorre "tipo colonna laterale di Facebook", cioè fintanto che ci sono contenuti da mostrare scrollando.
Il medesimo div, in visualizzazione smartphone, viene aperto tramite un button (il cui div contenitore "side" è invisibile tramite un display: none) in visualizzazione pc. Il div, poi, si chiude al click su uno dei suoi link, tramite un'apposita funzione.
Quello che non riesco a sistemare è lo scorrimento "tipo colonna laterale di Facebook" del div in visualizzazione smartphone. Questo è il codice della funzione, perfettamente operativo soltanto nel primo if:
codice:
function fermaScroll() {
var idSide = document.getElementById("side"); // elemento di controllo (div del button)
var statoSide = window.getComputedStyle(idSide).display; // puntamento al valore interessante dell'elemento di controllo
if (statoSide == "none") { // se il button non è visibile == sono su pc
var fixId = document.getElementById("destrotag");
var fixTop = fixId.offsetHeight + fixId.offsetTop - window.innerHeight + 130;
var fixLeft = fixId.offsetWidth + fixId.offsetLeft - window.innerWidth;
var correzioneY = - fixId.offsetHeight + window.innerHeight - 130;
var correzioneX = fixId.offsetLeft;
window.onscroll = function scrolla() {
if (window.pageYOffset > fixTop) {
fixId.style.position = "fixed";
fixId.style.top = correzioneY + "px";
fixId.style.left = correzioneX + "px";
} else {
fixId.style.position = "static";
fixId.style.top = "0px";
fixId.style.left = "0px";
}
}
} else if (statoSide != "none") { // se il button è visibile == sono su smartphone
var idHeader = document.getElementById("header"); // elemento da cui prendere la posizione del div da inserire
var idDestrotag = document.getElementById("destrotag"); // div che voglio gestire
var conta = idDestrotag.getElementsByTagName("a").length; // puntamento ai link del div che voglio gestire
var hComposta = document.getElementById("headertag").style.height + 23*conta; // calcolo l'height del div che voglio gestire
var fixTop = hComposta + idHeader.offsetHeight - window.innerHeight; // calcolo di quanto il div può salire
var correzioneY = - hComposta + window.innerHeight; // calcolo la correzione per fermare il div
window.onscroll = function scrolla() {
if (window.pageYOffset > fixTop) {
idDestrotag.style.position = "fixed";
idDestrotag.style.top = correzioneY + "px";
idDestrotag.style.left = "0px";
} else {
idDestrotag.style.position = "static";
idDestrotag.style.top = hComposta + "px";
document.getElementById("headertag").style.height = "23px"; // valore imposto perché sennò vale oltre 10.000!
}
}
}
}
Il div "destrotag" è composto da un div con classe "headercontent" cui ho dato apposta anche un div "headertag", seguito da una serie di link alti ciascuno 23px, che quantifico grazie alla variabile "conta".
La funzione che apre il div tramite il button, lo colloca correttamente, ma appena scrollo da smartphone, il div scompare (nonostante abbia display: block) anche se gli do uno z-index per portarlo avanti a tutto il resto.