My inquiry is straightforward, although the solution may not be as simple. I have an element fixed to the bottom of the browser window. When it is not needed, I want to hide it by setting its height to 0px. Whenever the user's mouse is a certain distance away from the bottom of the WINDOW (not document), I would like the div to reappear. After doing some research online, all I could find were instructions on triggering events or actions when the page was scrolled to a certain position from the bottom. Could someone please guide me in the right direction?
The query is as follows:
How can I trigger an event/execute a function when the mouse pointer is within a specified distance from the bottom of the browser window (not document)?
A few things to note:
This is for a greasemonkey/userscript, so solutions do not need to cater to IE.
Please refrain from suggesting the use of a library. For something as small-scale as this, relying on an entire library is not an acceptable solution for me.
SOLUTION: Expanding upon Kir lvlev's response below (remember to give his answer an upvote):
// For standards-compliant browsers
// If you have a solution for IE, feel free to share it in the comments and I will incorporate it.
window.addEventListener("mousemove",function(e) {
// 20 is the number of pixels from the bottom where the action should occur
if ((this.innerHeight - 20) <= e.clientY) {
// Perform desired actions here
}
});