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

【问题标题】：ScrollTop jQuery opacity based on scroll position fade in & out at top & bottom基于滚动位置的 ScrollTop jQuery 不透明度在顶部和底部淡入和淡出
【发布时间】：2016-03-11 18:28:05
【问题描述】：

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

.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

有人知道/如果我能找到这样的东西吗？如果可能的话尽量避免插件？

【问题讨论】：

标签： jquery opacity scrolltop vertical-scroll

【解决方案1】：

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

'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>

【讨论】：

感谢@Bear GRiZZLY Xi，几乎完全符合我的要求。该脚本可以很好地向下滚动，但不能在返回的路上？还注意到 .addClass('active') 末尾有一个错字（句号），我还想在类更改时询问动画或过渡。

【解决方案2】：

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

'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>

【讨论】：

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