用户滚动页面时为文本添加下划线 - JQUERY
我一直在寻找一种在用户向下滚动页面时为文本添加下划线的方法。我希望仅当用户向下滚动时才显示下划线。我尝试过使用 animate.css 和其他插件但无济于事。有任何想法吗？谢谢你！
jeck猫浏览 103回答 2
2回答
-
慕尼黑的夜晚无繁华
尝试这个<!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>您也可以在这里尝试示例。 -
守着一只汪
这可能会解决您的问题：$(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'); }});
随时随地看视频慕课网APP
相关分类
Html5