jQueryは、divがビューのポートから垂直に外れているかどうかを検出します。

Question

divを開いたときに、ビューポートの外側にあるのを検出しようとしています& cssを調整するクラスが追加されています。

基本的にこの例ではdivの半分が欠落していますのでdivの緑色になるクラスを追加する必要があります。このコードはdivがビューポートの外側にあることを検出するためのものです。

しかし、私はそれを同期することはできません。私は明らかにここで何か間違っています。

UPDATE

私はdiv要素の上部と下部の両方が、ビューポートの下部と上部の両方の外に出た場合、それが引き金技術的に何が起こっているか動作していることに気づきました。私はそれが上から外に出たときだけトリガーする必要があります。ここで

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

それoverflowsが、その後​​にdiv要素を変更した場合、それはdiv heightを検出し、問題、on-hoverました。

$(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

私はこれを自分で考え出しました。私の更新で言及されたように高さが下がっていたことを実感した後、最後に脳の嵐がありました。

私がやっていたことは、上からの距離を計算し、その距離が1未満かどうかを検出することでした。 0、-5、-250など。その後、私の声明を蹴る。

ちょっと正しい方法でこれを考えていない。

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>