Fix div to screen

Question

Nel mio progetto voglio correggere un elemento div in una certa posizione sullo schermo . Non la finestra, lo schermo. Quindi se il browser viene ridimensionato, il div rimane inserito e se il browser viene spostato, il div rimane inserito. Possibile?

Ecco la mia pagina HTML di base che contiene solo un punto al centro dello schermo.

#dot { 
 
    width: 8px; 
 
    height: 8px; 
 
    -webkit-border-radius: 4px; 
 
    -moz-border-radius: 4px; 
 
    border-radius: 4px; 
 
    background: #000; 
 
    position:relative; 
 
    left: -4px; 
 
    top:-4px; 
 
}

<div style="position: absolute; top: 50%; left: 50%;"> 
 
    <div id="dot"></div> 
 
</div>

So che posso usare window.screenX e window.screenY e poi fare un po 'di matematica per garantire la posizione è impostato per dare l'illusione di un elemento fisso, tuttavia, che richiederebbe polling la posizione della finestra ogni millisecondo per rilevare quando il browser viene spostato (che è probabilmente piuttosto pesante e raro comunque). Il piano è di fare questo con molto più di un semplice ...

Qualche idea? Sono completamente perplesso.

Answer 1

Penso che si possa utilizzare requestAnimationFrame, che è meglio per questo tipo di attività di setInterval, per tenere d'occhio window.screenX e window.screenY e anche per spostare (animare) il punto div se questi numeri cambiano:

var x = window.screenX, 
    y = window.screenY; 

function moveDot() { 
    if(x !== window.screenX || y !== window.screenY) 
     console.log('move dot'); 

    x = window.screenX; 
    y = window.screenY; 
} 

(function animloop(){ 
    window.requestAnimationFrame(animloop); 
    moveDot(); 
})(); 

Here's the Can I Use link for requestAnimationFrame.

Answer 2

Poiché window.screenX e window.screenY sono accessibili solo in JS, non c'è davvero modo di farlo se non il polling delle variabili e la modifica del css utilizzando javascript.

Answer 3

uso questo css troppo:

html { 
    height: 100%; 
} 

body { 
    height: 100% 
} 

e il tuo stile:

div { 
    ... 
}