Fix screen div

Question

In my project, I want to fix the div element to a specific position on the screen . Not a window, a screen. Therefore, if the browser is resized, the div remains in place, and if the browser moves, the div remains. Is it possible?

Here is my main html page containing only a dot in the center of the screen.

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

I know that I can use window.screenX and window.screenY and then do some math to make sure the position is set to create the illusion of a fixed element, however, this will require a polling of the window position every milliseconds to determine when the browser (which probably quite heavy and rare). The plan is to do this much more than just a point ...

Any ideas? I am completely at a dead end.

Answer 1

I think you can use requestAnimationFrame , which is better for such tasks than setInterval , keep track of window.screenX and window.screenY , and also move (animate) the div point if you change these numbers:

 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 you can use the link for requestAnimationFrame .

Answer 2

Since window.screenX and window.screenY are only available in JS, there is no way to do this other than poll variables and change css using javascript.

Answer 3

use this css too:

 html { height: 100%; } body { height: 100% } 

and your style:

 div { ... }