logo标签列表

两个DIV元素固定在顶部且一个在另一个之后呈现。

javascripthtmlcss
5

我有一个固定的页眉和一个隐藏的页眉，只有在从顶部向下滚动100像素时才会显示出来。

这里是Fiddle，解释了布局：

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

我该如何实现？

在滚动事件中，您应该获取当前滚动位置，如果超过100像素，则需要更改此div的样式。 - ArtemKh
4个回答
2

演示

添加 jQuery 代码： 在 window.scroll 事件处理程序中检查当前滚动位置（如果超过 100 像素，则显示第二个标题，如果小于 - 向上移动并隐藏）;

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

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

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

我已使用JQuery库，最后您需要使用一些JavaScript。

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

这是指向JSFiddle的链接：

运行程序

1
我已经为这个 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>

0

您可以使用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 = "";
}}

在将页面滚动到100像素后，添加一个名为“fixtoTop”的新类，然后在CSS中定义该类。
CSS代码：
.fixtoTop {
display:block;
position:fixed;
top:25px;
left: 0px;
right:0px;
background:green;
text-align:center;
width:280px;
margin: 0px auto;
}
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接