我一直在寻找一种在用户向下滚动页面时为文本添加下划线的方法。我希望仅当用户向下滚动时才显示下划线。我尝试过使用 animate.css 和其他插件但无济于事。有任何想法吗？谢谢你！
2 回答
慕尼黑的夜晚无繁华
TA贡献1864条经验 获得超6个赞
尝试这个
<!DOCTYPE html>
<html>
<head>
<style>
p{
margin-top : 150px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(window).on('scroll',function(){
var a = $(window).scrollTop();
//alert(a);
if( a > 50) {
$("p").css("textDecoration", "underline");
}
else {
$("p").css("textDecoration", "none");
}
});
});
</script>
</head>
<body>
<div>
<p>If you scroll, I will underline myself.</p>
<p>If you scroll, I will underline myself.</p>
<p>If you scroll, I will underline myself.</p>
<p>If you scroll, I will underline myself.</p>
</div>
</body>
</html>
您也可以在这里尝试示例。
守着一只汪
TA贡献1872条经验 获得超3个赞
这可能会解决您的问题：
$(document).on("scroll", function(){
var topPX = $(window).scrollTop(); //how many pixels the user scrolled
if(topPX > 100){
//underlines the text once the user scrolls past 100px
$('.text').css('text-decoration','underline');
}
if(topPX < 100){
//reverts it back to normal if the user came back to to the "below 100px" position
$('.text').css('text-decoration','none');
}
});
- 2 回答
- 0 关注
- 38 浏览
添加回答
举报
0/150
提交
取消