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"});
        }
    }); 
});

DEMO HERE：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（滚动）

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

DEMO：Demo

过去的另一个隐藏固定元素

1 个答案: