我想讓頁眉圖像在滾動和導航欄上消失以粘貼到頁面的頂部

Question

我想使頁面在滾動和導航欄上消失以粘貼到頁面的頂部。

<div class="headerimg"> 
    <!-- image that will disappear when scroll --> 
</div> 
<div class="navbar"> 
    <!--navbar to stick to the top when image disappear --> 
</div> 

Answer 1

您需要使用scroll事件來執行這些任務。在這裏，我用div與class.red和.green。我將隱藏.reddiv，並將.green div貼在頂部。
實施例：

HTML

<div class="red"></div> 
<div class="green"></div> 

CSS

body { 
    height: 1000px; 
    position: relative; 
} 
.red { 
    background: red; 
    height: 100px; 
    width: 100%; 
} 
.green { 
    background: green; 
    height: 100px; 
    width: 100%; 
} 
.stick { 
    position: fixed; 
    top: 0; 
} 

的jQuery

// Listen to scroll event for window 
$(window).scroll(function(){ 
    $(".red").hide(); // Hide the red div 
    $(".green").addClass("stick"); // Stick the green div at top 
}); 

這裏是demo

Answer 2

您可以簡單地使用滾動事件和滾動停止活動。用於隱藏和顯示標題。 所以，

 $(document).on("scroll",function(){ 
     $('.headerimg').hide(); }); 

     $(document).on("scrollstop",function(){ 
     $('.headerimg').show(); }); 

jQuery的inbulit功能隱藏/顯示內部追加風格顯示：無，並刪除顯示無（即使它作爲初始），如果我們使用顯示：無屬性的「導航欄」將佔據「headerimg ' 空間。否則，如果你想保留標題空間並且stil隱藏標題內容，你可以直接使用vissible：none屬性。

謝謝