Napraw div na ekranie

Question

W moim projekcie chcę naprawić element div w określonej pozycji na ekranie . Nie okno, ekran. Jeśli więc zmienisz rozmiar przeglądarki, div zostanie wstawiony, a jeśli przeglądarka zostanie przeniesiona, div pozostanie na miejscu. Możliwy?

Oto moja podstawowa strona html, która zawiera tylko kropkę na środku ekranu.

#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>

wiem, że mogę używać window.screenX i window.screenY a następnie zrobić trochę matematyki, aby zapewnić stanowisko jest ustawiony, aby dać złudzenie stałego elementu, jednak, że wymagałoby odpytywania położenie okna każdego milisekundę, aby wykryć, kiedy przeglądarka jest przenoszona (co i tak prawdopodobnie jest dość ciężkie i rzadkie). Plan ma to zrobić znacznie więcej niż tylko kropka ...

Jakieś pomysły? Jestem kompletnie zakłopotany.

Answer 1

myślę, że można użyć requestAnimationFrame, co jest lepsze dla tego rodzaju zadań niż setInterval, aby pilnować window.screenX i window.screenY a także przenieść (ożywiony) punkt div jeśli te numery zmienić:

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

Od window.screenX i window.screenY są dostępne tylko w JS, tak naprawdę nie ma sposobu, aby to zrobić inne niż odpytywanie zmiennych i zmiana css za pomocą javascript.

Answer 3

użycie tego css też:

html { 
    height: 100%; 
} 

body { 
    height: 100% 
} 

i Twój styl:

div { 
    ... 
}