向下滾動/向上顯示隱藏序列中的多個元素

我想要顯示/隱藏多個元素，並向上滾動並向下滾動。向下滾動/向上顯示隱藏序列中的多個元素

我需要的是，當我向下滾動，滾動金額大於（DIV1offset(). top和小於DIV2offset().top）DIV1應該是可見的，當滾動量比（DIV2更大offset(). top和小於DIV3offset().top）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"> 
 
\t \t <div>At <span class="blueColor">over 3 feet tall,</span> <br> it stands taller <br> than the average <br> 4-year-old.</div> 
 
\t </div> 
 
\t <div class="divOnFruits" id="div2"> 
 
\t \t <div>And it <span class="blueColor">serves <br> more than 200 people </span> – making sure no one walks away hungry!</div> 
 
\t </div> 
 
\t <div class="divOnFruits" id="div3"> 
 
\t \t <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> 
 
\t </div> 
 
\t <div class="divOnFruits" id="div4"> 
 
\t \t <div>This massively delicious arrangement <span class="blueColor"> <br>weighs in at <br> over 65 lbs.</span></div> 
 
\t </div>

來源

2015-10-21 A.K

試着從你的JavaScript代碼刪除減去300。嘗試下面的代碼。

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

.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"> 
 
\t \t <div>At <span class="blueColor">over 3 feet tall,</span> <br> it stands taller <br> than the average <br> 4-year-old.</div> 
 
\t </div> 
 
\t <div class="divOnFruits" id="div2"> 
 
\t \t <div>And it <span class="blueColor">serves <br> more than 200 people </span> – making sure no one walks away hungry!</div> 
 
\t </div> 
 
\t <div class="divOnFruits" id="div3"> 
 
\t \t <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> 
 
\t </div> 
 
\t <div class="divOnFruits" id="div4"> 
 
\t \t <div>This massively delicious arrangement <span class="blueColor"> <br>weighs in at <br> over 65 lbs.</span></div> 
 
\t </div>

來源

2015-10-21 05:02:25

向下滾動/向上顯示隱藏序列中的多個元素

回答

相關問題