有没有办法让我的元素（图标，字体）在滚动时改变，然后在滚动停止时改变回来？答案

【问题标题】：Is there a way to have my elements(icons, fonts) change while scrolling and then change back when scrolling stops?有没有办法让我的元素（图标，字体）在滚动时改变，然后在滚动停止时改变回来？
【发布时间】：2019-12-03 18:47:15
【问题描述】：

我一直在进行单页设计，我想在滚动时更改某些元素，但在滚动停止时让它们恢复原状。我曾尝试使用如下所示的 scrollTop 函数，但这会无限期地更改项目。

jQuery(window).scroll(function(){
		var fromTopPx = 20;
		var scrolledFromtop = jQuery(window).scrollTop();
		if(scrolledFromtop > fromTopPx){
		jQuery('.homeicon').addClass('fa-angle-double-down');
	}else{
		jQuery('.homeicon').removeClass('fa-angle-double-down');
								}
							});

.homeicon {
    padding: 100px 5px 1000px 20px;
    }

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#">
  <i class="homeicon fa fa-home fa-2x">
  </i>
   <span>Home</span>
</a>

【问题讨论】：

标签： javascript jquery scroll

【解决方案1】：

是的，这很容易实现，你需要的就是去抖切换图标回来的功能，lodash为此提供了一个功能。

这是结果。欲了解更多信息，请查看去抖动文档。

https://lodash.com/docs/4.17.15#debounce

注意：使用这种方法更容易，因为这样可以避免进行魔术计算。

const switchBack = () => {
  jQuery('.homeicon').removeClass('fa-angle-double-down');
}

const debounced = _.debounce(switchBack, 250);

jQuery(window).scroll(function() {
  // when scrolling we set the class to be the one we want when scrolling (haha)
  jQuery('.homeicon').addClass('fa-angle-double-down');
  // also we run our debounced function.
  // it will run 250ms after we stop calling it.
  debounced();
});

.homeicon {
  padding: 100px 5px 1000px 20px;
}

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<a href="#">
  <i class="homeicon fa fa-home fa-2x">
  </i>
  <span>Home</span>
</a>

【讨论】：

非常感谢！我一直在寻找这样的东西。