jQuery erkennen, ob div ist außerhalb der Ansicht Port vertikal

Question

Ich versuche zu erkennen, wenn mein div geöffnet wird, ist die Oberseite davon außerhalb der Ansicht-Port &, wenn es eine Klasse hinzufügen, um die CSS anzupassen.

Also im Grunde in diesem Beispiel auf Schwebeflug Hälfte des div fehlt, so dass sollte dann die Klasse hinzufügen, die das div grün schalten würde. Weil der Code erkennen soll, dass sich das Div außerhalb des Darstellungsbereichs befindet.

Aber ich kann es nicht synchronisieren. Ich mache hier offensichtlich etwas falsch.

UPDATE

Ich habe gerade festgestellt, dass es sowohl geschieht technisch funktioniert, was, wenn die oberen und unteren Rand des div außerhalb der beiden unteren und oberen Rand des Hafenblick geht dann löst es. Ich brauche es nur auszulösen, wenn es aus der Spitze geht.

JSfiddle

$(document).on("mouseenter", ":has('.infotip')", function() { 
 
    $(this).children(".infotip").addClass("active"); 
 
}); 
 
$(document).on("mouseleave", ":has('.infotip')", function() { 
 
    $(this).children(".infotip").removeClass("active"); 
 
}); 
 

 
// Infotip on screen 
 
$(document).on("mouseenter", ":has('.infotip.onscreen')", function() { 
 
    var $target = $(this).children(".infotip"); 
 
    if ($target.length) { 
 
    var $bounce = $target.offset().top + $target.height(); 
 

 
    if ($bounce > $(window).height()) { 
 
     $target.addClass("test"); 
 
     } else { 
 
     $target.addClass("top"); 
 
     } 
 
    } 
 

 
});

.infotip { 
 
    display: none; 
 
    height:500px; 
 
    width:100px; 
 
    position:absolute; 
 
    left:50px; 
 
    top:-250px; 
 
} 
 
.infotip.active { 
 
    display: block; 
 
} 
 
/* goes red when past top of viewport (which it will not do in this example) */ 
 

 
.infotip.top { 
 
    background-color: rgba(249, 14, 18, 1.00) 
 
} 
 
/* goes green if visible (which it should do when hovering) */ 
 

 
.infotip.test { 
 
    background-color: rgba(35, 223, 51, 1.00) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<div class="team-card align"> 
 
    hover me 
 
    <div class="infotip onscreen"> 
 
    Iam infotip 
 
    </div> 
 
</div>

Answer 1

war hier die Frage, on-hover es div height erkennen und wenn es dann overflows das div zu green ändert.

$(document).on("mouseenter", function() { 
    var $target = $(".team-card").children(".infotip"); 
    if ($target.length) { 
    var $bounce = $target.offset().top + $target.height(); 

    if ($bounce > $(window).height()) { 
     $target.addClass("test"); 
     } else { 
     $target.addClass("top"); 
     } 
    } 

}); 

Answer 2

Also habe ich das selbst herausgefunden. Endlich hatte ich einen Brainstorm, nachdem ich festgestellt hatte, wie hoch die Höhe war, wie in meinem Update erwähnt.

Was ich hätte tun sollen, ist die Berechnung der Entfernung von oben und dann erkennen, ob diese Entfernung weniger als eine ist z. 0, -5, -250 usw. Dann trete meine Aussage in.

Ich habe gerade nicht ein wenig über diese eine Sache nachgedacht.

JSFiddle

$(document).on("mouseenter", ":has('.infotip')", function() { 
 
    $(this).children(".infotip").addClass("active"); 
 
}); 
 
$(document).on("mouseleave", ":has('.infotip')", function() { 
 
    $(this).children(".infotip").removeClass("active"); 
 
}); 
 

 
// Infotip on screen 
 
$(document).on("mouseenter", ":has('.infotip.onscreen')", function() { 
 
    var $target = $(this).children(".infotip"); 
 
    if ($target.length) { 
 
    var scrollTop = $(window).scrollTop(), 
 
    elementOffset = $target.offset().top, 
 
    bounce = (elementOffset - scrollTop); 
 

 
    if (bounce < 1) { 
 
     $target.addClass("test"); 
 
     } else { 
 
     $target.addClass("top"); 
 
     } 
 
    } 
 

 
});

.infotip { 
 
    display: none; 
 
    height:500px; 
 
    width:100px; 
 
    position:absolute; 
 
    left:50px; 
 
    top:-250px; 
 
} 
 
.infotip.active { 
 
    display: block; 
 
} 
 
/* goes red when past top of viewport (which it will not do in this example) */ 
 

 
.infotip.top { 
 
    background-color: rgba(249, 14, 18, 1.00) 
 
} 
 
/* goes green if visible (which it should do when hovering) */ 
 

 
.infotip.test { 
 
    background-color: rgba(35, 223, 51, 1.00) 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
 
<div class="team-card align"> 
 
    hover me 
 
    <div class="infotip onscreen"> 
 
    Iam infotip 
 
    </div> 
 
</div>