jQuery hover falling off from the screen

Question

This is my code at the moment. I need to prevent hover box 'falling down' on the bottom of the page while hovering on paragraphs. I managed to prevent that on the right on smaller screens but i cant on bottom.

 $(function() { var moveLeft = 20; var moveDown = 10; // var moveRight = 10; $('.hoverKartX').hover(function(e) { $('.hoverKart').show(); }, function() { $('.hoverKart').hide(); }); $('.hoverKartX').mousemove(function(e) { $('.hoverKart').css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft); // preventing 'falling out to the right' on smaller screens if ($('.hoverKart').position()['left'] + $('.hoverKart').width() > $(window).width()) { $('.hoverKart').css("left", $(window).width() - $(".hoverKart").width()); }; }); }); 

 .hoverKart { position: absolute; width: 400px; height: 220px; border-radius: 25px; border: 1px solid #999; z-index: 1; display: none; background: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="hoverKart"> <!-- hidden --> <p> TEST </p> </div> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> 

Answer 1

您可以使用$('.hoverKartX').mousemove(function(e) {的e对象$('.hoverKartX').mousemove(function(e) {来计算鼠标距离窗口宽度的距离。如果距离小于.hoverKart的高度，那么你可以调整其与边缘的偏移量，使其保持在窗口内。

Answer 2

You already have the logic for off the right (left / width) so apply the same login to the bottom (pageY+height):

if ((e.pageY + moveDown + $(".hoverKart").height()) 
    > ($(window).scrollTop() + $(window).height())) {
  $('.hoverKart').css("top", 
       $(window).height() - $(".hoverKart").height() + $(window).scrollTop()
  );
}

 $(function() { var moveLeft = 20; var moveDown = 10; // var moveRight = 10; $('.hoverKartX').hover(function(e) { $('.hoverKart').show(); }, function() { $('.hoverKart').hide(); }); $('.hoverKartX').mousemove(function(e) { $('.hoverKart').css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft); $(".hoverKart>p").html($(this).html()) // preventing 'falling out to the right' on smaller screens if ($('.hoverKart').position().left + $('.hoverKart').width() > $(window).width()) { $('.hoverKart').css("left", $(window).width() - $(".hoverKart").width() - moveLeft); }; if ((e.pageY + moveDown + $(".hoverKart").height()) > ($(window).scrollTop() + $(window).height())) { $('.hoverKart').css("top", $(window).height() - $(".hoverKart").height() + $(window).scrollTop()); } }); }); 

 .hoverKart { position: absolute; width: 400px; height: 120px; border-radius: 25px; border: 1px solid #999; z-index: 1; display: none; background: #fff; } p.hoverKartX { border:1px solid green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="hoverKart"> <!-- hidden --> <p> TEST </p> </div> <p class="hoverKartX"> test1 </p> <p class="hoverKartX"> test2 </p> <p class="hoverKartX"> test3 </p> <p class="hoverKartX"> test4 </p> <p class="hoverKartX"> test5 </p> <p class="hoverKartX"> test6 </p> <p class="hoverKartX"> test7 </p> <p class="hoverKartX"> test8 </p> <p class="hoverKartX"> test9 </p> <p class="hoverKartX"> testa </p> <p class="hoverKartX"> testb </p> <p class="hoverKartX"> testc </p> <p class="hoverKartX"> testd </p> <p class="hoverKartX"> teste </p> <p class="hoverKartX"> testf </p> <p class="hoverKartX"> testg </p> <p class="hoverKartX"> testh </p> <p class="hoverKartX"> testi </p> <p class="hoverKartX"> testj </p> <p class="hoverKartX"> testk </p> <p class="hoverKartX"> testl </p> <p class="hoverKartX"> testm </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> 

Answer 3

Here is solution

 $(function() { var moveLeft = 20; var moveDown = 10; // var moveRight = 10; $('.hoverKartX').hover(function(e) { $('.hoverKart').show(); }, function() { $('.hoverKart').hide(); }); $('.hoverKartX').mousemove(function(e) { var offset = $( this ).offset().top, bodyOffset=$(document).scrollTop(); if($( this ).offset().top+$(".hoverKart").height()+moveDown<bodyOffset+$(window).height()){ $('.hoverKart').css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft); } else{ $('.hoverKart').css('top', bodyOffset+$(window).height()-$(".hoverKart").height()) .css('left', e.pageX + moveLeft); } // preventing 'falling out to the right' on smaller screens if ($('.hoverKart').position()['left'] + $('.hoverKart').width() > $(window).width()) { $('.hoverKart').css("left", $(window).width() - $(".hoverKart").width()); }; }); }); 

 .hoverKart { position: absolute; width: 400px; height: 220px; border-radius: 25px; border: 1px solid #999; z-index: 1; display: none; background: #fff; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="hoverKart"> <!-- hidden --> <p> TEST </p> </div> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p> <p class="hoverKartX"> test </p>