使用jquery滚动div，当到达页脚时淡出

Question

我有一长页的内容，我想为它创建一个工具栏，并将其悬停在页面顶部。我已经设法完成了，但是我也需要做到这一点，一旦页面上的页脚div到达，那么悬停的div将会淡出。以下是我迄今所做的：

function sticky_relocate() { 

var window_top = jQuery(this).scrollTop(); 
var div_top = jQuery('#anchor').offset().top; 
var footer_top = jQuery('.footer-container').offset().top; 
//var length = jQuery('.main').height() - jQuery('#fixed-toolbar').height() + jQuery('.main').offset().top; 
//var height = jQuery('.main').height() + 'px'; 

if (window_top > div_top) { 
    jQuery('#fixed-toolbar').addClass('fixed'); 
} else if (window_top > footer_top) { 
    jQuery('#fixed-toolbar').removeClass('fixed'); 
} else { 
    jQuery('#fixed-toolbar').removeClass('fixed'); 
} 

//console.log(height); 
} 

jQuery(function() { 
jQuery(window).scroll(sticky_relocate); 
sticky_relocate(); 
}); 

这里是我的html的粗略表示：

<div id="anchor"> 
    <div id="fixed-toolbar"> 
     This is a test 
    </div> 
</div> 

<div> 
    Static text blocks<br> 
</div> 

<div class="footer-container"> 
    This is the footer<br> 
</div> 

你能告诉我，我要去哪里错了吗？我找不到如何在“footer-container”div到达时淡出滚动div。

我已经创建了一个的jsfiddle，这里的链接：http://jsfiddle.net/5bcaz88p/1/

Answer 1

在这里，你是一个工作示例http://jsfiddle.net/5bcaz88p/2/

你别的/如果条件是假的，基本上是因为你有他们永远不会在第二去如果（如果（window_top> footer_top）），因为window_top将总是满足第一个条件（它将比div_top大），并且它将永远不会到达第二个条件。第二个if应该作为单独条件:)

function sticky_relocate() { 

    var window_top = jQuery(this).scrollTop(); 
    var div_top = jQuery('#anchor').offset().top; 
    var footer_top = jQuery('.footer-container').offset().top; 

    if (window_top > div_top) { 
     jQuery('#fixed-toolbar').addClass('fixed'); 
    } else { 
     jQuery('#fixed-toolbar').removeClass('fixed'); 
    } 

    if (window_top > footer_top) { 
     jQuery('#fixed-toolbar').removeClass('fixed'); 
    } 

} 

jQuery(function() { 
    jQuery(window).scroll(sticky_relocate); 
    sticky_relocate(); 
});