两个div来获得固定位置，一个接一个地位于顶部

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

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

The Fiddle here explains the layout:

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

.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;
}

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.

蓝色div是固定的。绿色div将隐藏，直到客户端从顶部滚动100px的页面。在它穿过100px之后，它应该开始显示并且正好位于蓝色div旁边的位置。

How do I do that?

我怎么做？

4 个解决方案

#1

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

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

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

首先，您需要修复您的html代码，因为有许多标签未关闭：

<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>

After you need to set up your css:

在你需要设置你的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%;
    }

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

最后你需要使用很少的JavaScript。（我使用了库JQuery）：

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

And this is the link to JSFiddle:

这是JSFiddle的链接：

Run the program

运行程序

#2

DEMO

DEMO

add jQuery code: in window.scroll event handler check the current scroll position (if over 100px show your second header, if less - move up away from the screen and hide);

添加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"});  
  }
});

#3

I have added a id for the div which will get fixed position when scrolled

我为div添加了一个id，滚动时会得到固定的位置

function scrollFunc(e) {
  var diffY = window.pageYOffset; // window scroll position
  var topPos = document.getElementById("num2").offsetTop; // position of the div which is to be fixed
  
  console.log(diffY ,topPos)
  if (diffY > topPos) {
    document.getElementById("num2").classList.add("fixed") // add class fixed
  } else {
    document.getElementById("num2").classList.remove("fixed") // removed class fixed
  }
}
window.onscroll = scrollFunc

.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;
}
.fixed {
  position: fixed;
  top: 0;
  margin: 0;
  width: 100%;
}

<div class='container'>
  <div class='num1'>Hello Iam fixed</div>
  <div class='num2' id="num2">I would like to get fix while iam scrolling</div>
  <div>
    have two divs: -A header bar, which is fixed while scrolling, and ... The header bar is fixed to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other questions tagged have two divs: -A header bar, which is fixed while
    scrolling, and ... The header bar is fixed to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other questions tagged have two divs: -A header bar, which is fixed while scrolling, and ... The header bar is fixed
    to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other questions tagged have two divs: -A header bar, which is fixed while scrolling, and ... The header bar is fixed to the top fine, but I can't seem to get the
    notification div to fix ... 1 .... Browse other questions tagged have two divs: -A header bar, which is fixed while scrolling, and ... The header bar is fixed to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other
    questions tagged have two divs: -A header bar, which is fixed while scrolling, and ... The header bar is fixed to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other questions tagged have two divs: -A header bar,
    which is fixed while scrolling, and ... The header bar is fixed to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other questions tagged have two divs: -A header bar, which is fixed while scrolling, and ... The
    header bar is fixed to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other questions tagged have two divs: -A header bar, which is fixed while scrolling, and ... The header bar is fixed to the top fine, but I
    can't seem to get the notification div to fix ... 1 .... Browse other questions tagged have two divs: -A header bar, which is fixed while scrolling, and ... The header bar is fixed to the top fine, but I can't seem to get the notification div to fix
    ... 1 .... Browse other questions tagged have two divs: -A header bar, which is fixed while scrolling, and ... The header bar is fixed to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other questions tagged have
    two divs: -A header bar, which is fixed while scrolling, and ... The header bar is fixed to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other questions tagged have two divs: -A header bar, which is fixed while
    scrolling, and ... The header bar is fixed to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other questions tagged have two divs: -A header bar, which is fixed while scrolling, and ... The header bar is fixed
    to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other questions tagged have two divs: -A header bar, which is fixed while scrolling, and ... The header bar is fixed to the top fine, but I can't seem to get the
    notification div to fix ... 1 .... Browse other questions tagged have two divs: -A header bar, which is fixed while scrolling, and ... The header bar is fixed to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other
    questions tagged have two divs: -A header bar, which is fixed while scrolling, and ... The header bar is fixed to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other questions tagged have two divs: -A header bar,
    which is fixed while scrolling, and ... The header bar is fixed to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other questions tagged have two divs: -A header bar, which is fixed while scrolling, and ... The
    header bar is fixed to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other questions tagged have two divs: -A header bar, which is fixed while scrolling, and ... The header bar is fixed to the top fine, but I
    can't seem to get the notification div to fix ... 1 .... Browse other questions tagged have two divs: -A header bar, which is fixed while scrolling, and ... The header bar is fixed to the top fine, but I can't seem to get the notification div to fix
    ... 1 .... Browse other questions tagged have two divs: -A header bar, which is fixed while scrolling, and ... The header bar is fixed to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other questions tagged have
    two divs: -A header bar, which is fixed while scrolling, and ... The header bar is fixed to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other questions tagged have two divs: -A header bar, which is fixed while
    scrolling, and ... The header bar is fixed to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other questions tagged have two divs: -A header bar, which is fixed while scrolling, and ... The header bar is fixed
    to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other questions tagged have two divs: -A header bar, which is fixed while scrolling, and ... The header bar is fixed to the top fine, but I can't seem to get the
    notification div to fix ... 1 .... Browse other questions tagged have two divs: -A header bar, which is fixed while scrolling, and ... The header bar is fixed to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other
    questions tagged have two divs: -A header bar, which is fixed while scrolling, and ... The header bar is fixed to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other questions tagged have two divs: -A header bar,
    which is fixed while scrolling, and ... The header bar is fixed to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other questions tagged have two divs: -A header bar, which is fixed while scrolling, and ... The
    header bar is fixed to the top fine, but I can't seem to get the notification div to fix ... 1 .... Browse other questions tagged
  </div>
</div>

#4

You can use the javascript window.onscroll event for this.

您可以使用javascript window.onscroll事件。

Javascript code:

Javascript代码：

window.onscroll = function() {myFunction()};
function myFunction() {
if (document.body.scrollTop > 100  || document.documentElement.scrollTop > 100) {
    document.getElementById("num2").className = "fixtoTop";
} else {
        document.getElementById("num2").className = "";
}}

After scrolling the page to 100px, add a new class "fixtoTop" and then define that class in CSS.

将页面滚动到100px后，添加一个新类“fixtoTop”，然后在CSS中定义该类。

Css Code:

Css代码：

.fixtoTop {
display:block;
position:fixed;
top:25px;
left: 0px;
right:0px;
background:green;
text-align:center;
width:280px;
margin: 0px auto;
}

#1