两个div来获得固定位置，一个接一个地位于顶部 [英] Two divs to get fixed position, one after the other at the top

问题描述

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

I have a fixed header and one hidden header which would display only after scrolling 100px from the top to the bottom.

这里的小提琴解释了布局：

.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 旁边的位置。

The blue div is fixed. The green div would be in hidden until the client scrolls it 100px of the page from top. After it crosses the 100px, it should start displaying and get position-fixed exactly next to the blue div.

我该怎么做？

推荐答案

我刚刚尝试构建如果它正是你想要的，请告诉我。

I have just tried to build something.Let me now if it is exactly what you want.

首先你需要修复你的html代码，因为有很多标签没有关闭：

Firstly you need to fix your html code because there are many tags that aren't closed:

<div class='container'>
    <div class='num1'>Hello Iam fixed</div>
    <div class='num2'>I would like to get fix while iam scrolling
    </div>
    <div class="content">Long text</div>
</div>

在您需要设置css之后：

After you need to set up your css:

   body,html{
     paddin: 0;
     margin: 0;
   }  
   .container
   {
     background:yellow;
     width: 100%;
   }
   .num1
   {
      color: white;
      position: fixed;
      height:25px;
      background:blue;
      text-align: center;
      width:100%;
      top:0;
    }
    .num2
    {
      display: none;
      background:green;
      text-align:center;
      width:100%;
      height: 25px;
      position: fixed;
      top: 25px;
    }
    .content{
      margin-top: 25px;
      width: 100%;
    }

最后你需要少量使用JavaScript。（我用过库JQuery）：

And at the end you need to use little of JavaScript.(I have used the library JQuery):

    $(function(){
    $(window).scroll(function(){
    var pxFromTop4 = $('.num1').offset().top;
    if(pxFromTop4 >= 100){
        $(".num2").fadeIn(300);
    }else{
        $(".num2").fadeOut(300);
    }
  });
});

这是JSFiddle的链接：

And this is the link to JSFiddle:

运行程序

这篇关于两个div来获得固定位置，一个接一个地位于顶部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！