通过另一个时隐藏固定元素

Question

这是一个小演示：

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" 等等。另外，当所有到达页脚时，将它们全部隐藏。

Answer 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

通过另一个时隐藏固定元素

Hide fixed element when past another

html

javascript

fixed