javascript - Two divs to get fixed position, one after the other at the top - Stack Overflow

admin 管理员组

文章数量: 1086019

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?

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?

• javascript
• html
• css

Share Improve this question Follow edited Jan 12, 2016 at 11:10 honk 9,7531111 gold badges8080 silver badges8787 bronze badges asked Jan 12, 2016 at 9:33 stackystacky 31111 gold badge77 silver badges2626 bronze badges 1

• On scroll event you should get current scroll position and if it more than 100px you need change styles for this div. – ArtemKh Commented Jan 12, 2016 at 9:40

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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"});  
  }
});

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

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>

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

本文标签： javascriptTwo divs to get fixed position one after the other at the topStack Overflow