Question

我有一个div，并且希望从顶部background color的位置开始scroll的位置。下面是我的代码-

HTML

<div> 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. </div>
<div id='Div'> 

</div>

<div> 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. 
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
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</div>

CSS

#Div {
  background-color: red;
  height: 20px;
  width: 0%;
}

J查询

$(window).scroll(function(){;
    w = Math.floor( $(window).scrollTop() );  
   if (w > 5) {
         $('#Div').animate({ width: '100%' }, 1000);
   } else {
        $('#Div').animate({ width: '0%' }, 1000);
   }

});

运行良好，但是我发现响应时间有所延迟。根据{{1}}的位置，填充工作不会很快发生，因为我需要等待几秒钟才能看到填充工作开始。

提琴-http://jsfiddle.net/bogaso/5r3afz7n/11/

有什么方法可以使响应时间瞬时化吗？

我们将不胜感激任何帮助。

Answer 1

概念

使用css @keyframes规则定义两个已命名的动画，一个扩展颜色条，一个收缩颜色条。视滚动位置而定，开始适当的动画。为了选择正确的动画并限制动画在超过滚动偏移量阈值时开始，引入了CSS类colorized来记录状态（在这种情况下：滚动偏移量> 5）。仅当状态已更改时，才会启动动画。当前滚动偏移量与类colorize的存在与否共同决定要选择哪个动画。

不需要Jquery来管理动画，DOM API就足够了。

在this fiddle上观看它。

代码

HTML

<div><!-- ... long text .....></div>
<div id='Div'>

</div>
<div><!-- ... even longer text .....></div>

CSS

#Div {
  background-color: red;
  height: 20px;
  width: 0%;
}

@keyframes colorize {
  from { width: 0%; }
  to   { width: 100%; }
}

@keyframes decolorize {
  from { width: 100%; }
  to   { width: 0%; }
}

JS

$(window).scroll(function(){
   let w = Math.floor( $(window).scrollTop() );
   let e = document.querySelector('#Div');

   if (w > 5) {
       if (! e.classList.contains("colorized")) {
           // Adjust the scrolling state proxy
           e.classList.add("colorized");

           // Animation name. Links the code to the CSS spec of start/end values of the animated attribute
           e.style.setProperty ( 'animation-name', 'colorize' );

           // Animation starts immediately
           e.style.setProperty ( 'animation-delay', '0s' );

           // It takes that long for the complete animation to complete. 
           e.style.setProperty ( 'animation-duration', '2s' );

           // The final state of the animated attribute persists.
           e.style.setProperty ( 'animation-fill-mode', 'forwards' );

           // The animation is run exactly once for each triggering event
           e.style.setProperty ( 'animation-iteration-count', '1' );
       }
   } else {
       if (e.classList.contains("colorized")) {
           e.classList.remove("colorized");
           e.style.setProperty ( 'animation-name', 'decolorize' );
           e.style.setProperty ( 'animation-delay', '0s' );
           e.style.setProperty ( 'animation-duration', '2s' );
           e.style.setProperty ( 'animation-fill-mode', 'forwards' );
           e.style.setProperty ( 'animation-iteration-count', '1' );
       }
   }
});

扩展

在所示的版本中，decolorize动画开始时，彩色栏跳至全宽。在视觉上，如果正在进行反向colorize动画，则这没有吸引力。一种更复杂的解决方案是读取彩条div的当前宽度，并相应地设置各个@keyframe动画的起始值。

根据滚动位置逐渐填充背景色

1 个答案: