我一直在尋找一種在用戶向下滾動頁面時為文本添加下劃線的方法。我希望僅當用戶向下滾動時才顯示下劃線。我嘗試過使用 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條經驗 獲得超4個贊
這可能會解決您的問題：
$(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 關注
- 167 瀏覽
添加回答
舉報
0/150
提交
取消