javascript - 两个div固定位置，一个接一个在顶部

Question

我有一个固定标题和一个隐藏标题，只有在从上到下滚动 100px 后才会显示。

Fiddle here解释布局:

.container {
  background: yellow;
}
.num1 {
  position: fixed;
  height: 25px;
  background: blue;
  text-align: center;
  width: 100%;
  top: 0;
}
.num2 {
  background: green;
  text-align: center;
  width: 280px;
  margin: 50px auto 0;
}

蓝色的 div 是固定的。绿色的 div 将处于隐藏状态，直到客户端将其从页面顶部滚动到 100px。在它超过 100px 后，它应该开始显示并固定在蓝色 div 旁边。

我该怎么做？

Answer 1

DEMO

添加 jQuery 代码:在 window.scroll 事件处理程序中检查当前滚动位置(如果超过 100px 则显示您的第二个标题，如果小于 - 向上移离屏幕并隐藏)；

$(window).scroll(function(){
  if ($(this).scrollTop()>100) { 
      $(".num2").css({"position":"fixed","top":25+"px","visibility":"visible"});  
  } else {
     $(".num2").css({"position":"absolute","top":-100+"px","visibility":"hidden"});  
  }
});