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

Answer 2

我刚刚尝试构建一些东西。现在就告诉我，如果它正是你想要的那样。

首先，您需要修复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>

需要设置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）：

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

这是JSFiddle的链接：

Run the program

Answer 3

我为id添加了div，在滚动时会获得固定位置

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>

Answer 4

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

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

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

Css代码：

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

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

4 个答案: