我一直在尋找一種在用戶向下滾動(dòng)頁面時(shí)為文本添加下劃線的方法。我希望僅當(dāng)用戶向下滾動(dòng)時(shí)才顯示下劃線。我嘗試過使用 animate.css 和其他插件但無濟(jì)于事。有任何想法嗎？謝謝你！
2 回答
慕尼黑的夜晚無繁華
TA貢獻(xiàn)1864條經(jīng)驗(yàn) 獲得超6個(gè)贊
嘗試這個(gè)
<!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貢獻(xiàn)1872條經(jīng)驗(yàn) 獲得超4個(gè)贊
這可能會(huì)解決您的問題：
$(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 關(guān)注
- 181 瀏覽
添加回答
舉報(bào)
0/150
提交
取消