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>

你能告诉我哪里出错吗？一旦“脚注容器”出现问题，我无法弄清楚如何淡出滚动div。达到了div。

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

Answer 1

这是一个有效的例子http://jsfiddle.net/5bcaz88p/2/

你的其他/如果条件是假的，基本上就像你拥有它一样，如果（ if（window_top＆gt; footer_top）），它将永远不会进入第二个因为window_top总是满足第一个条件（它将比div_top更大，它永远不会到第二个if。第二个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();
});

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

1 个答案: