Two divs to get fixed position, one after the other at the top

问题:

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

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.

How do I do that?

回答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:

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

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

    $(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:

Run the program

回答2:

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

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

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

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.

Css Code:

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

文章来源: Two divs to get fixed position, one after the other at the top