A Pen by Jorge Epuñan.

A-Pen-by-Jorge-Epuñan.markdown

A Pen by Jorge Epuñan

A Pen by Jorge Epuñan on CodePen.

License.

script.js

// para @ginirsss y su proyecto que necesita saber como crear eventos segun la posicion del mouse en el viewport.

var semaforo = true;

$('body').append('<p class="pixeles"></p><p class="porcentaje"></p><p class="debug"></p>');

// en pixeles
$(window).on('resize load', function(){
  
  var $altoVentana = $(window).height();
  var $anchoVentana = $(window).width();
  $('.pixeles').text('ventana: ancho: '+$anchoVentana+'px | alto: '+$altoVentana+'px');  
});

// en porcentaje
$(window).on('mousemove', function(e){
  var $height = e.pageY - $(window).scrollTop();
  var $width = e.pageX - $(window).scrollTop();
  var $verticalVentana = Math.floor($height/($(window).height())*100);
  var $horizontalVentana =  Math.floor($width/($(window).width())*100);
  
  $('.porcentaje').text('posicion del cursor: horizontal: '+$horizontalVentana+'% | vertical: '+$verticalVentana+'%');
  
  if($horizontalVentana <= 30 && semaforo){
    // aqui lo q quieras hacer
    $('.debug').text('menor a 30%');
    semaforo=false;
  }
  
  if($horizontalVentana >= 31 && $horizontalVentana <= 69 && !semaforo) {
    // aqui lo q quieras hacer
    $('.debug').text('mayor a 31% y menor a 69%');
    semaforo=true;
  }
  
  if($horizontalVentana >= 70 && semaforo){
    // aqui lo q quieras hacer
    $('.debug').text('mayor a 70%');
    semaforo=false;
  }
  
});

style.css

body {
  background-color: #16a085;
  color: white;
  text-align: center;
}