卡住的標題

我一直在努力解決這個問題是如何完成幾個小時，而且比我開始的時間還要近。卡住的標題

<div class="container"> 
    <div class="fixed-top-bar"></div> 
    <div class="scrolling-bottom-bar"></div> 
</div>

有3位我正在嘗試做。

的fixed-top-bar總是fixed（易當然）

的scrolling-bottom-bar最初位於下方的fixed-top-bar（再次通過容易只將偏移諸如頂部餘量）。

但是，這是我堅持的一點。 container（或設計的最低部分）在底部有一個陰影以指示它升高。最初這個陰影位於scrolling-lower-bar以下，但是當它從視圖中消失時，陰影仍然粘在固定頂杆上。

我不確定這是否可以用html/css完成，或者它需要一些js。這裏舉一個例子來說明我所試圖複製的內容。

example

來源

2016-09-21 John Ohara

仍不清楚我已經寫的圖書館，我沒有得到你的例子 –

想與這個添加的風格是什麼。 – Mani

@CeylanMumunKocabaş - 你會發現頭部底部有一個陰影 - 當頁面捲動陰影時，它會向上移動直到下部消失 - 但是陰影仍然固定在YOP欄上。 –

你需要使用JavaScript 是這樣的：

$(window).scroll(function() {  
    var scroll = $(window).scrollTop(); 
    if (scroll > 0) {// you can add the height of your header 
     $(".fixd-top").addClass("active"); 
    } 
    else { 
     $(".fixd-top").removeClass("active"); 
    } 
}); 




    CSS 

    .fixed-top.active { 
     box-shadow: 0 0 10px rgba(0,0,0,0.4); 
    }

來源

2016-09-21 08:38:45