我想让滚动条和导航栏上的标题图像消失，以便粘在页面顶部

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的2 .green。我会隐藏.red div并在滚动顶部粘贴.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函数隐藏/显示内部追加样式显示：无并删除显示无（即使其成为初始），如果我们使用Display：none属性＆＃39; navbar＆＃39;将占据＆＃39; headerimg＆＃39;空间。否则，如果你想保留标题空间并且stil隐藏标题内容，你可以直接使用vissible：none属性。

谢谢