粘性元素不会像预期的那样隐藏和显示

时间:2016-02-15 15:05:15

标签: jquery sticky

好的,我有:

<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,而不是当它从页面顶部滚动时。

有什么想法吗?

0 个答案:

没有答案