好的,我有:
<div class="testplace"></div>
<div class="footer_navigation"><div class="checkout-btn"></div></div>
jQuery(document).ready(function($){
var elem2Query = ".footer_navigation .checkout-btn";
var elem2Hide = ".testplace";
var jElem2Hide = $(elem2Hide);
if (isElementInView()) jElem2Hide.addClass("hideClass");
$(window).scroll(function(){
if (isElementInView()){
jElem2Hide.fadeOut(0);
}else{
jElem2Hide.fadeIn(0);
}
});
function isElementInView(){
var jWindow = $(window);
var jElem = $(elem2Query);
var pageViewTop = jWindow.scrollTop();
var pageViewBottom = pageViewTop + jWindow.height();
var elemTop = jElem.offset().top;
var elemBottom = elemTop + jElem.height();
var isInView =((elemBottom >= pageViewTop)
&& (elemTop <= pageViewBottom)
&& (elemBottom <= pageViewBottom)
&& (elemTop >= pageViewTop));
return isInView;
}
});
.testplace
仍然存在&#34;粘性&#34;固定在页面底部,直到.checkout-btn
进入查看 - 问题是当.checkout-btn
滚动到查看.testplace
时隐藏但是当.checkout-btn
滚动到顶部时然后,.testplace
div返回查看页面。当.testplace
滚动到页面底部的视口中时,我只希望.fadeIn
到.checkout-btn
,而不是当它从页面顶部滚动时。
有什么想法吗?