向下滚动/向上滚动显示隐藏序列中的多个元素

Question

我正在尝试显示/隐藏多个元素，向上滚动并向下滚动。

我需要的是，当我向下滚动并且滚动量大于（ div1 offset(). top且小于 div2 offset().top）<当滚动量大于（ div2 offset(). top且小于 div3 offset().top时，应显示strong> div1 div2 应该是可见的，而不是 div1 ，依此类推......

我试过这个没有成功，请指导。谢谢！

$(window).bind('scroll',function(e){
  var st = $(window).scrollTop(),
      dv1 = $('#div1').offset().top - 300,
      dv2 = $('#div2').offset().top - 300,
      dv3 = $('#div3').offset().top - 300,
      dv4 = $('#div4').offset().top - 300;

  if( st > dv1 &&  st < dv2) {
    $('#div1 div').stop().animate({ 'opacity': '1' }, 200);
  } else {
    $('#div1 div').stop().animate({ 'opacity': '0' }, 200);
  }

  if( st > dv2 &&  st < dv3) {
    $('#div2 div').stop().animate({ 'opacity': '1' }, 200);
  } else {
    $('#div2 div').stop().animate({ 'opacity': '0' }, 200);
  }
});

.divOnFruits{margin-top:78px; font-size:22px; width:168px; display:block; }
.divOnFruits div { opacity: 0; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="divOnFruits" id="div1">
		<div>At <span class="blueColor">over 3 feet tall,</span> <br> it stands taller <br> than the average <br> 4-year-old.</div>
	</div>
	  <div class="divOnFruits" id="div2">
		<div>And it <span class="blueColor">serves <br> more than 200 people </span> – making sure no one walks away hungry!</div>
	</div>
	<div class="divOnFruits" id="div3">
		<div>We use <span class="blueColor"> 6 different types of fruit </span> to build our most bountiful fruit arrangement! (And 8 types in the chocolate dipped version.)</div>
	</div>
	<div class="divOnFruits" id="div4">
		<div>This massively delicious arrangement <span class="blueColor"> <br>weighs in at <br> over 65 lbs.</span></div>
	</div>

Answer 1

尝试从您的javascript代码中删除减去300。请尝试以下代码。

＆＃13;

＆＃13;

$(window).bind('scroll',function(e){
  var st = $(window).scrollTop(),
      dv1 = $('#div1').offset().top;
      dv2 = $('#div2').offset().top;
      dv3 = $('#div3').offset().top;
      dv4 = $('#div4').offset().top;

  if( st > dv1 &&  st < dv2) {
    $('#div1 div').stop().animate({ 'opacity': '1' }, 200);
  } else {
    $('#div1 div').stop().animate({ 'opacity': '0' }, 200);
  }

  if( st > dv2 &&  st < dv3) {
    $('#div2 div').stop().animate({ 'opacity': '1' }, 200);
  } else {
    $('#div2 div').stop().animate({ 'opacity': '0' }, 200);
  }
});

＆＃13;

.divOnFruits{margin-top:78px; font-size:22px; width:168px; display:block; }
.divOnFruits div { opacity: 0; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="divOnFruits" id="div1">
		<div>At <span class="blueColor">over 3 feet tall,</span> <br> it stands taller <br> than the average <br> 4-year-old.</div>
	</div>
	  <div class="divOnFruits" id="div2">
		<div>And it <span class="blueColor">serves <br> more than 200 people </span> – making sure no one walks away hungry!</div>
	</div>
	<div class="divOnFruits" id="div3">
		<div>We use <span class="blueColor"> 6 different types of fruit </span> to build our most bountiful fruit arrangement! (And 8 types in the chocolate dipped version.)</div>
	</div>
	<div class="divOnFruits" id="div4">
		<div>This massively delicious arrangement <span class="blueColor"> <br>weighs in at <br> over 65 lbs.</span></div>
	</div>

＆＃13;

＆＃13;

＆＃13;