js how to know if element touch border

10 <= x < window.innerHeight
2

1.shadow{
2    box-shadow: 0px 3px 5px #888888;
3}
4

1var update = function (modifier) {
2    if (38 in keysDown) { // Player holding up
3        hero.y -= hero.speed * modifier;
4    }
5    if (40 in keysDown) { // Player holding down
6        hero.y += hero.speed * modifier;
7    }
8    if (37 in keysDown) { // Player holding left
9        hero.x -= hero.speed * modifier;
10    }
11    if (39 in keysDown) { // Player holding right
12        hero.x += hero.speed * modifier;
13    }
14
15    // Are they touching?
16    if (
17        hero.x <= (monster.x + 32)
18        && monster.x <= (hero.x + 32)
19        && hero.y <= (monster.y + 32)
20        && monster.y <= (hero.y + 32)
21    ) {
22        ++monstersCaught;
23        reset();
24    }
25    if(hero.x <= 0){
26        hero.x = 0;
27    }
28    else if(isMaxWidth()){
29        hero.x = canvas.width -32
30    }
31    if(hero.y <= 0){
32        hero.y = 0;
33    }
34    else if(isMaxHeight()){
35        hero.y = canvas.height -32
36    }
37
38};
39
40var isMaxWidth = function(){
41    return hero.x >= canvas.width - 32;
42};
43
44var isMaxHeight = function(){
45    return hero.y >= canvas.height - 32;
46};
47

1$(function(){
2    var $window = $(window),
3        $header = $('.header'),
4        $this   = $(this); // <-----here you can cache your selectors
5
6    $window.on('scroll', function(){
7       if($this.scrollTop() > 0){
8           $header.addClass('shadow');
9       }else{
10           $header.removeClass('shadow');
11       }
12    }).scroll();
13});
14