有没有办法让我的元素(图标、字体)在滚动时更改，然后在滚动停止时更改回来?

Question

我一直在做一个单页设计，我想在滚动时更改某些元素，但在滚动停止时将它们恢复。我尝试使用如下所示的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>

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