我想让页眉图像在滚动和导航栏上消失以粘贴到页面的顶部

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属性。

谢谢