jQuery는 div가 뷰 포트의 외부에있는 경우 감지합니다.

Question

CSS를 조정하는 클래스를 추가하는 경우 div가 열리는 시점을보기 포트 & 외부에있는 것으로 감지하려고합니다.

그래서 기본적으로이 예제에서는 div의 절반이 누락되어 div 녹색을 켜는 클래스를 추가해야합니다. 이 코드는 div가 뷰포트 외부에 있는지 감지하기위한 것입니다.

하지만 동기화 할 수 없습니다. 나는 분명히 여기서 뭔가 잘못하고있다.

UPDATE

난 그냥 기술적 사업부의 상단과 하단 모두 바닥과 트리거 다음 뷰 포트의 상단 양쪽의 외부 간다면 무슨 일이 일어나고 있는지 작동하고 있음을 발견했습니다. 그것이 정상에서 벗어날 때만 나는 그것이 필요합니다. 여기

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

JSfiddle

은 다음 green에 사업부를 변경 overflows 경우가 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 등. 내 진술서를 걷어차.

그냥 올바른 생각으로 조금 생각하지 않았다.

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