超过另一个时隐藏固定元素答案

【问题标题】：Hide fixed element when past another超过另一个时隐藏固定元素
【发布时间】：2017-03-17 16:46:31
【问题描述】：

这是一个小演示：

HTML

<body>
    <div class="container-empty"></div>
    <ul>
        <div id="divfix"><li id="lifix">Text 1 FIXED</li></div>
        <div id="divfix2"><li id="lifix2">Text 2 FIXED</li></div>
        <div id="divfix3"><li id="lifix3">Text 3 FIXED</li></div>
    </ul>
    <div class="container-footer"></div>
</body>

JSCRIPT

var toppag=$("#lifix,#lifix2,#lifix3");
var pag=$("#divfix,#divfix2,#divfix3");

toppag.css({position:"relative"});


$(window).scroll(function () {
    var scroll=$(this).scrollTop();
    pag.each(function(i,n){
        if(scroll < $(this).offset().top) {
            toppag.eq(i).css({'position':'relative'});
        }
        if(scroll > ($(this).offset().top + toppag.eq(i).height()))  {
            toppag.eq(i).css({'position':'fixed',"top":"0"});
        }
    }); 
});

在这里演示：https://jsfiddle.net/Kigris/4cb0ygun/2/

当到达“Text 2 FIXED”时，我想隐藏“Text 1 FIXED”等等。此外，当所有内容都到达页脚时，将它们全部隐藏。

【问题讨论】：

标签： javascript html fixed

【解决方案1】：

尝试添加

 var footer = $(".container-footer");
 pag.css('position', 'relative'); under toppage.css etc

和

 if(scroll > footer.offset().top){
    toppag.hide();
 }else{ toppag.show();}

和

toppag.eq(i-1).parent().css({'z-index':"0"});

在你的第二个 if(scroll)

这样做是为了确保固定元素按堆叠顺序被推到底部。

演示：Demo

【讨论】：

太棒了！非常感谢先生！