隱藏固定的元素，當過去的另一個

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的位置：https://jsfiddle.net/Kigris/4cb0ygun/2/

我は當達到「Text 2 FIXED」時nt隱藏「Text 1 FIXED」等。此外，當所有到達頁腳都隱藏它們。

來源

2017-03-17 Kigris

嘗試增加

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

在你的第二個如果（滾動）

這樣做有什麼可以確保固定元素獲得推到了底部om堆疊順序。

DEMO：Demo

來源

2017-03-17 17:17:11 Dallas

太棒了！非常感謝先生！ – Kigris

不客氣！ – Dallas

隱藏固定的元素，當過去的另一個

回答

相關問題