Question

我有第一个固定的div。在滚动时，我想要显示第二个div的内容，就好像它们在Conichi上的第一个div上被修复一样

＆＃13;

.one {
  width: 768px;
  height: 700px;
  color: white;
  background-color: black;
  position: fixed;
  z-idex: -1;
}

.two {
  top: 700px;
  background-color: white;
  width: 768px;
  height: 700px;
  z-index:1;
  position: relative;
}

＆＃13;

<body>
  <div class='one'>
    <p>
	  What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  <div class='two'>
    <p>
		What is Lorem Ipsum?
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
	</p>
  </div>
</body>

＆＃13;

Answer 1

你可以使用Bootstrap中的Scropllpsy，你可以点击我提供的likn看到它，或者只包括bootstrap 4和：

body {
  position: relative;
}

<body data-spy="scroll" data-target="#navbar-example">
 ...
   <div id="navbar-example">
     <ul class="nav nav-tabs" role="tablist">
      ...
     </ul>
   </div>
  ...
</body>

您可以通过Javascript激活它：

$('body').scrollspy({ target: '#navbar-example' })

Answer 2

我设法重新创建了您正在寻找的效果 - fiddle

CSS

.container_1 {
     background-color: black;
   color: #fff;
   z-index:3;
 }
 .container_2 {
     background-color: white;
     z-index:2;
 }
 .container_3 {
     background-color: red;
   color: #CCC;
     z-index:1;
 }
 .container {
     overflow: hidden;
     width: 100%;
     height: 100%;
     position: fixed;
 }

的jQuery

var height = 0,
    divs = 0;

$('.container').each(function(){
    var eachdiv = $(this).outerHeight();
    height += eachdiv;
    divs ++;
});

$('body').css('height',height);

$(window).on('scroll', function () {
    var scrollTop = $(window).scrollTop();

    if(scrollTop <= (height/divs)){
        $('.container_1').css('height',(height/divs)-scrollTop);
    } else if (scrollTop <= (height/divs) * 2) {
        $('.container_1').css('height',0); // if the window scroll goes to quick
        $('.container_2').css('height',(height/divs)*2-scrollTop);
    } else if (scrollTop <= (height/divs) * 3) {
        $('.container_2').css('height',0);
    }// and so on...

});

HTML

<body>
  <div class="container container_1">
      <p>What is Lorem Ipsum?</p>
  </div>
  <div class="container container_2">
      <p>What is Lorem Ipsum?</p>
  </div>
  <div class="container container_3">
      <p>What is Lorem Ipsum?</p>
  </div>  
</body>

如何从下面开始揭示第二个div的内容？

2 个答案: