ScrollTop基于滚动位置的jQuery不透明度在顶部和底部淡入淡出

我正在寻找一个基于垂直滚动位置显示不透明度的jQuery脚本。（可见）垂直中间是不透明度1，但在顶部&底部到不透明度0都会消失。页面上具有相同类名称的多个包装器行元素。ScrollTop基于滚动位置的jQuery不透明度在顶部和底部淡入淡出

.inner.cover 
 
{ 
 
    height:20%; 
 
}

<div class="inner cover" style="opacity:0;">1 Vertical Top</div> 
 
<div class="inner cover" style="opacity:0.333;">2</div> 
 
<div class="inner cover" style="opacity:1;">3 Vertical Middle</div> 
 
<div class="inner cover" style="opacity:0.333;">4</div> 
 
<div class="inner cover" style="opacity:0;">5 Vertical Bottom</div> 
 
<div class="inner cover" style="opacity:0;">6 Below Vertical Bottom</div> 
 
<div class="inner cover" style="opacity:0;">7 Below Vertical Bottom</div> 
 
<div class="inner cover" style="opacity:0;">8 Below Vertical Bottom</div> 
 
<div class="inner cover" style="opacity:0;">9 Below Vertical Bottom</div>

事情是这样的网站： https://aibcomms.typeform.com/to/vMZwYQ

任何人都知道在哪里/如果我能找到这样的事情？如果可能，试图避免插件？

来源

2015-12-07 Kerry7777

也许这个决定会适合你。祝你好运。

'use strict'; 
 
jQuery(function($){ 
 
    
 
    var lines = $('.line'); 
 
    
 
    function setStep(step){ 
 
    
 
    $('.line').removeClass('active'); 
 
    $('.line').removeClass('fog'); 
 

 
    $(lines[step]) 
 
     .addClass('active') 
 
     .prev() 
 
     .addClass('fog'); 
 
    
 
    if (lines.length-1 > step){ 
 
     
 
     $(lines[step]) 
 
     .next() 
 
     .addClass('fog'); 
 
     
 
     step++; 
 
     
 
     setTimeout(function(){ 
 
     setStep(step); 
 
     },2000); 
 
     
 
    } 
 
    
 
    } 
 
    
 
    //start item active 0 
 
    setStep(0); 
 
});

.line{ 
 
    opacity:0; 
 
    display:none; 
 
} 
 
.fog{ 
 
    opacity:0.33; 
 
    display:block; 
 
} 
 
.active{ 
 
    opacity:1; 
 
    display:block; 
 
} 
 
.inner.cover 
 
{ 
 
    height:20%; 
 
}

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="inner cover line" >1 Vertical Top</div> 
 
<div class="inner cover line" >2</div> 
 
<div class="inner cover line" >3 Vertical Middle</div> 
 
<div class="inner cover line" >4</div> 
 
<div class="inner cover line" >5 Vertical Bottom</div> 
 
<div class="inner cover line" >6 Below Vertical Bottom</div> 
 
<div class="inner cover line" >7 Below Vertical Bottom</div> 
 
<div class="inner cover line" >8 Below Vertical Bottom</div> 
 
<div class="inner cover line" >9 Below Vertical Bottom</div> 
 
</body> 
 
</html>

来源

2015-12-07 09:24:07

谢谢@Bear灰熊玺几乎完全一样我想要的。该脚本很好地滚动下来，但不是在备份的方式？也注意到.addClass（'active'）结尾处的拼写错误（句号）我也会在班级变化时询问动画或过渡。 – Kerry7777

也许这种解决方案适合你。祝你好运。现在你可以管理自己在什么方向你需要向上或向下通过项目。

'use strict'; 
 
jQuery(function($){ 
 
    
 
    var lines = $('.line'); 
 
    
 
    function setStep(step,move){ 
 
    
 
    $('.line').removeClass('active'); 
 
    $('.line').removeClass('fog'); 
 

 
    $(lines[step]).addClass('active'); 
 
    
 
    switch (move) { 
 
     case 'down': 
 
     if (lines.length-1 > step){ 
 
      $(lines[step])    
 
      .prev() 
 
      .addClass('fog'); 
 
      $(lines[step]) 
 
      .next() 
 
      .addClass('fog'); 
 
     
 
      step++; 
 
     
 
      setTimeout(function(){ 
 
      setStep(step,move); 
 
      },2000); 
 
     
 
     } else { 
 
      setStep(lines.length-1,'up'); 
 
     } 
 
     break; 
 
     case 'up': 
 
     if (0 < step){ 
 
      
 
      $(lines[step]).addClass('active'); 
 
      
 
      if (lines.length-1 !== step){ 
 
      $(lines[step])    
 
       .next() 
 
       .addClass('fog'); 
 
      } 
 
      
 
      $(lines[step]) 
 
      .prev() 
 
      .addClass('fog'); 
 
     
 
      step--; 
 
     
 
      setTimeout(function(){ 
 
      setStep(step,move); 
 
      },2000); 
 
     
 
     } else { 
 
      setStep(0,'down'); 
 
     } 
 
     break; 
 
    } 
 
    } 
 
    
 
    //start item active 0 
 
    setStep(0,'down'); 
 
});

.line{ 
 
    opacity:0; 
 
    display:none; 
 
    transition: opacity 0.9s; 
 
} 
 
.fog{ 
 
    opacity:0.33; 
 
    display:block; 
 
    transition: opacity 0.9s; 
 
} 
 
.active{ 
 
    opacity:1; 
 
    display:block; 
 
    transition: opacity 0.9s; 
 
} 
 
.inner.cover 
 
{ 
 
    height:20%; 
 
}

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="inner cover line" >1 Vertical Top</div> 
 
<div class="inner cover line" >2</div> 
 
<div class="inner cover line" >3 Vertical Middle</div> 
 
<div class="inner cover line" >4</div> 
 
<div class="inner cover line" >5 Vertical Bottom</div> 
 
<div class="inner cover line" >6 Below Vertical Bottom</div> 
 
<div class="inner cover line" >7 Below Vertical Bottom</div> 
 
<div class="inner cover line" >8 Below Vertical Bottom</div> 
 
<div class="inner cover line" >9 Below Vertical Bottom</div> 
 
</body> 
 
</html>

来源

2015-12-08 05:57:32

现在非常接近，但如果你快速滚动到底部，它似乎并没有显示内容或挂在一个顶部的div上？我将CSS更改为： .inner.cover { min-height：600px; } – Kerry7777

ScrollTop基于滚动位置的jQuery不透明度在顶部和底部淡入淡出

回答

相关问题